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

Описание

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

Пример использования:
<table border="1" height="100"> <tr> <th valign="top">Верх</th> <th valign="middle">Середина</th> <th valign="bottom">Низ</th> </tr> <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

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

  • Устаревший атрибут (deprecated в HTML5)
  • Поддерживается браузерами для обратной совместимости
  • Приоритет ниже, чем у CSS-стилей
  • Ограниченный функционал по сравнению с CSS

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

<style> .v-top { vertical-align: top; } .v-middle { vertical-align: middle; } .v-bottom { vertical-align: bottom; } </style> <table border="1" style="height: 100px;"> <tr> <th class="v-top">Верх</th> <th class="v-middle">Середина</th> <th class="v-bottom">Низ</th> </tr> </table>

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

  • Используйте CSS-свойство vertical-align
  • Для сложного выравнивания комбинируйте с display: flex
  • Учитывайте высоту строки (line-height)
  • Для табличных данных предпочтительно middle

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

  • Не поддерживает современные значения CSS (text-top, sub)
  • Нет контроля над выравниванием многострочного текста
  • Может конфликтовать с CSS-стилями
  • Не работает с Flexbox и Grid layout

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

  • CSS Flexbox с align-items
  • CSS Grid с align-content
  • Комбинацию display: table-cell и vertical-align
  • Относительное позиционирование для точного контроля

Сравнение с CSS:

Характеристика valign атрибут CSS vertical-align
Поддержка Устарело Современный стандарт
Гибкость 4 значения 9+ значений
Приоритет Низкий Высокий