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

Описание

Атрибут valign для тега <colgroup> определяет вертикальное выравнивание содержимого всех ячеек в группе столбцов таблицы. Этот атрибут устарел в HTML5 и заменён на CSS-свойство vertical-align.

Важно: Хотя атрибут продолжает работать в браузерах, он считается устаревшим и не рекомендуется для использования в новых проектах.
Пример использования (устаревший способ):
<table border="1" height="200px"> <colgroup valign="top"></colgroup> <colgroup valign="middle"></colgroup> <colgroup 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

Современная CSS-альтернатива:

<style> .top-align { vertical-align: top; } .middle-align { vertical-align: middle; } .bottom-align { vertical-align: bottom; } </style> <table> <colgroup class="top-align"></colgroup> <colgroup class="middle-align"></colgroup> <colgroup class="bottom-align"></colgroup> <tr> <td>Верх</td> <td>Середина</td> <td>Низ</td> </tr> </table>

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

  • Для заголовков (<th>) часто используют bottom
  • Основное содержимое обычно выравнивают по середине
  • Для многострочного текста может подойти top
  • Всегда указывайте высоту ячеек для явного вертикального выравнивания
  • Для сложных таблиц используйте CSS Flexbox или Grid

Пример с Flexbox для сложного выравнивания:

<style> .flex-table td { display: flex; align-items: center; justify-content: center; height: 60px; } </style> <table class="flex-table"> <tr> <td>Идеально центрированный контент</td> </tr> </table>

Важные замечания:

  • Атрибут не работает для ячеек с rowspan
  • Может конфликтовать с CSS-стилями
  • Не влияет на выравнивание элементов внутри ячеек
  • Для полного контроля используйте CSS display: flex в ячейках
  • Всегда проверяйте отображение в мобильных браузерах
Совет: Для сложных табличных интерфейсов рассмотрите использование CSS Grid или специализированных библиотек типа AG Grid.

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