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

Описание

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

Пример использования:
<table border="1" height="100"> <tr valign="middle"> <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> .vertical-center td { vertical-align: middle; height: 100px; } </style> <table border="1"> <tr class="vertical-center"> <td>Текст по центру</td> <td>Вертикально выровненный контент</td> </tr> </table>

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

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

Особенности вертикального выравнивания:

  • Работает только при заданной высоте ячейки
  • По-разному интерпретируется для текста и блоковых элементов
  • Для изображений часто требуется дополнительное выравнивание
  • Влияет на положение содержимого, но не самой ячейки

Ограничения устаревшего атрибута:

  • Невалиден в HTML5
  • Ограниченная гибкость по сравнению с CSS
  • Не поддерживает все возможности vertical-align
  • Смешивает структуру и оформление

Пример с разным выравниванием:

<style> .custom-align td { height: 80px; } .custom-align td:first-child { vertical-align: top; } .custom-align td:last-child { vertical-align: bottom; } </style> <table border="1"> <tr class="custom-align"> <td>Верх</td> <td>Низ</td> </tr> </table>

Примечание: Для сложных табличных layouts рассмотрите использование CSS Flexbox или Grid как более современной альтернативы таблицам.