Справочник по CSS (ЦСС) и ШТМЛ
Как выровнять содержимое ячеек таблицы по верхнему краю?
Таблицы часто применяются для разработки многоколонного макета. Каждая ячейка выступает в роли колонки, при этом высота всех колонок будет одинакова, поскольку ячейки взаимосвязаны. По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной колонке контент начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью параметра valign="top" тега <TD>. В примере 1 показано, как выравнивать по верхнему краю ячейки за счет атрибута valign.
Пример 1. Использование параметра valign
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание содержимого ячеек</title>
</head>
<body>
<table width="100%" cellpadding="5">
<tr>
<td valign="top" bgcolor="#cccccc">Углерод</td>
<td valign="top" bgcolor="#ffffdd">Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества.</td>
</tr>
</table>
</body>
</html>
С помощью стилей удобнее управлять положением содержимого в ячейках. Для этого следует применить параметром vertical-align со значением top, добавляя его к селектору TD, как показано в примере 2.
Пример 2. Применение стилей
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание содержимого ячеек</title>
<style type="text/CSS (ЦСС)">
TABLE {
width: 100%; /* Ширина таблицы */
}
TD {
padding: 5px; /* Поля в ячейках */
vertical-align: top; /* Выравнивание по верхнему краю ячеек */
}
.col1 { background: #ccc; }
.col2 { background: #ffd; }
</style>
</head>
<body>
<table>
<tr>
<td class="col1">Углерод</td>
<td class="col2">Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества.</td>
</tr>
</table>
</body>
</html>
В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.
Рис. 1. Таблица с выравниванием содержимого ячеек по верхнему краю