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

Описание

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

Пример использования:
<table border="1" height="150"> <thead valign="bottom"> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> </thead> <tbody> <tr> <td>Данные 1</td> <td>Данные 2</td> </tr> </tbody> </table>

Значения атрибута:

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

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

  • Устаревший атрибут (deprecated в HTML5)
  • Применяется ко всем ячейкам внутри <thead>
  • Может быть переопределён для отдельных ячеек
  • Поддерживается браузерами для обратной совместимости

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

<style> .table-header-group th { vertical-align: bottom; padding: 15px 5px; } </style> <table border="1"> <thead class="table-header-group"> <tr> <th>Продукт</th> <th>Характеристики</th> </tr> </thead> <tbody> <tr> <td>Ноутбук</td> <td>16 ГБ RAM</td> </tr> </tbody> </table>

Рекомендации:

  • Используйте CSS vertical-align вместо атрибута
  • Сочетайте с padding для лучшего визуального эффекта
  • Для сложных таблиц применяйте CSS Flexbox
  • Тестируйте на разных высотах строк

Ограничения:

  • Не поддерживает современные единицы измерения
  • Нет контроля над минимальной/максимальной высотой
  • Может конфликтовать с CSS-стилями
  • Не работает с CSS Grid layout

Примечание: Для профессионального вертикального выравнивания:

  • Используйте CSS Flexbox с align-items
  • Применяйте относительные единицы (em, rem)
  • Для сложных случаев используйте CSS Grid