Атрибут valign

Содержание

Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию контент ячейки располагается по ее вертикали в центре.

Данный атрибут устарел, взамен используйте стили.

Синтаксис

<tr valign="top | middle | bottom | baseline">...</tr>

Значения

top: Выравнивание содержимого ячеек по верхнему краю строки.
middle: Выравнивание по середине.
bottom: Выравнивание по нижнему краю.
baseline: Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек строки к одной линии.

Значение по умолчанию

middle

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TR, атрибут valign</title> <style type="text/css"> p {margin-top: 0;} .pot { background: #800000; color: white; } .title { font-size: 200%; } </style> </head> <body> <table width="100%" cellpadding="5"> <tr valign="top" class="pot"> <td class="title">Борщ</td> <td><p>Мясо отварить до готовности. Промыть свеклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности.</p> <p>Бульон процедить, мясо нарезать кусочками. В бульон добавить нарезанный дольками картофель, довести до кипения, опустить нарезанную соломкой свежую капусту и варить 10-15 минут, добавить пассерованные овощи, болгарский перец, нашинкованный тонкой соломкой, специи и довести до готовности.</p> <p>Готовому борщу дать настояться в течение 20-25 минут. При подаче к столу добавить сметану, мясо, зелень.</p></td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 1.

Выравнивание содержимого ячеек по верхнему краю

Рис. 1. Выравнивание содержимого ячеек по верхнему краю

Примечание

Для выравнивания содержимого внутри ячеек по вертикали используйте стилевое свойство vertical-align, добавляя его к селектору tr.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Выравнивание по вертикали</title> <style> table { width: 80%; border: 1px solid #000; margin: auto; height: 300px; } tr { vertical-align: top; } </style> </head> <body> <table> <tr> <td> ... </td> </tr> </table> </body> </html>

Браузеры


3	12	1	3.5	1	1


1	1	6	1

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.