Как выровнять содержимое ячеек таблицы по верхнему краю?

🕛 22.01.2009, 23:43
Таблицы часто применяются для создания многоколонного макета. Каждая ячейка выступает в роли колонки, при этом высота всех колонок будет одинакова, поскольку ячейки взаимосвязаны. По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной колонке текст начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью параметра valign="top" тега <TD>. В примере 1 показано, как выравнивать по верхнему краю ячейки за счет параметра valign.
Пример 1. Использование параметра valign

HTML 4.01IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <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. Применение стилей

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <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>