Атрибут valign тега <col>

Описание

Атрибут valign для тега <col> определяет вертикальное выравнивание содержимого всех ячеек в столбце таблицы. Этот атрибут позволяет быстро задать единое вертикальное позиционирование для всего столбца без необходимости стилизовать каждую ячейку отдельно.

Пример использования:
<table border="1" height="200px"> <colgroup> <col valign="top"> <col valign="middle"> <col valign="bottom"> </colgroup> <tr> <td>Верх</td> <td>Середина</td> <td>Низ</td> </tr> </table>

Допустимые значения:

Значение Описание Эквивалент CSS
top Выравнивание по верхнему краю vertical-align: top
middle Выравнивание по центру vertical-align: middle
bottom Выравнивание по нижнему краю vertical-align: bottom
baseline Выравнивание по базовой линии vertical-align: baseline

Рекомендации по использованию:

  • Для заголовков столбцов часто используют valign="bottom"
  • Основное содержимое обычно выравнивают по середине
  • Для многострочного текста может подойти valign="top"
  • В сложных таблицах предпочтительнее CSS
  • Тестируйте в разных браузерах

Пример с CSS вместо атрибута valign:

<style> .header-col { vertical-align: bottom; } .content-col { vertical-align: middle; } .footer-col { vertical-align: top; } </style> <table> <colgroup> <col class="header-col"> <col class="content-col"> <col class="footer-col"> </colgroup> <tr> <td>Заголовок</td> <td>Контент</td> <td>Примечание</td> </tr> </table>

Особенности работы:

  • Атрибут valign считается устаревшим в HTML5
  • Применяется ко всем ячейкам столбца, включая <th>
  • Может быть переопределен атрибутом valign в отдельных ячейках
  • Для ячеек с разной высотой работает непредсказуемо
  • Лучше всего работает с таблицами фиксированной высоты

Пример комбинированного использования:

<table border="1" height="150px"> <colgroup> <col valign="top"> <col valign="middle"> </colgroup> <tr> <td>Текст вверху<br>Вторая строка</td> <td>По центру</td> </tr> <tr height="50px"> <td valign="bottom">Переопределено</td> <td>Осталось по центру</td> </tr> </table>

Примечание: Хотя атрибут valign удобен для быстрого прототипирования, в современных веб-приложениях рекомендуется использовать CSS-свойство vertical-align, которое предоставляет больше возможностей и лучше поддерживается.