За умовчанням вміст осередків вирівнюється по центру вертикалі, що не завжди зручно, особливо якщо вміст найближчих осередків відрізняється за обсягом. При цьому вийде, що в одному осередку текст починається від верхнього краю, а в іншому посередині. Виправити це положення можна за допомогою стильової властивості vertical-align зі значенням top, додаючи його до селектора td, як показано в прикладі 1.
Приклад 1. Застосування vertical-align
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вирівнювання вмісту осередків</title> <style> table { width: 100%; /* Ширина таблиці */
}
td { padding: 5px; /* Поля в осередках */
vertical-align: top; /* Вирівнювання по верхньому краю осередків */
}
.col1 { background: #CADADD; }
.col2 { background: #F5E8D0; }
</style>
</head>
<body> <table> <tr> <td class="col1">Вуглець</td> <td class="col2"> Зустрічається у природі у трьох видах: вугілля, графіту та алмазу. Утворює велику кількість з'єднань. Вуглець є неодмінним компонентом будь-якої органічної речовини.
</td>
</tr>
</table>
</body>
</html>У цьому прикладі всі параметри таблиці та осередків задаються через стилі. Результат прикладу показаний на мал. 1.
Мал. 1. Таблиця з вирівнюванням вмісту осередків по верхньому краю