Выравнивание содержимого ячейки по горизонтали и по вертикали
Если ячейка шире, чем ее содержимое, Web-браузер по умолчанию выровняет содержимое в ячейке по левому краю ячейки.
ПРАКТИКУМ
Чтобы изменить выставляемое по умолчанию горизонтальное (то есть слева направо) выравнивание содержимого ячейки, добавьте в дескриптор <td> ячейки атрибут align. Атрибут align может получать три возможных значения:
- left. Выравнивает содержимое по левому краю ячейки.
- right. Выравнивает содержимое по правому краю ячейки.
- center. Центрирует содержимое между левым и правым краями ячейки.
На рис. 2.15 показано, как Internet Explorer отобразит таблицу, определенную следующим HTML-кодом, в дескрипторах <td> которой использовано каждое из допустимых значений атрибута align:
<table border="1" width="100%" height="100%">
<tr><th>width="33%">Выравнивание по центру</th>
<th width="33%">Выравнивание по левому краю</th><th width="33%">Выравнивание по правому краю</th></tr>
<tr><td width="33%" align="center">По центру</td>
<td width="33%" align="left">Cлeвa</td><td width="33%" align="right">Справа</td></tr>
</table>
Рис. 2.15. Таблица, иллюстрирующая действие трех значений атрибута выравнивания по горизонтали
Если высота ячейки превышает высоту ее содержимого, Web-браузер по умолчанию отцентрирует содержимое по вертикали между верхним и нижним краем ячейки. Чтобы изменить существующее по умолчанию вертикальное (то есть сверху вниз) выравнивание содержимого ячейки, добавьте в дескриптор <td> ячейки атрибут valign. Атрибут valign может принимать четыре возможных значения:
- top. Отображает содержимое так, что оно начинается у верхнего края ячейки.
- middle. Центрирует содержимое вертикально между верхним и нижним краями ячейки.
- baseline. В Netscape Navigator отображает содержимое так, что оно заканчивается у нижнего края ячейки. В Internet Explorer задание значения "baseline" ("по базовой линии") изменяет только вертикальное положение текста в ячейке, если ячейка содержит и текст, и изображение. При задании значения "baseline" Internet Explorer позиционирует текст так, чтобы он заканчивался вровень с нижним краем рисунка. Если в ячейке нет рисунка, Internet Explorer игнорирует значение "baseline" атрибута valign и начинает текстовое содержимое у верхнего края ячейки.
- bottom. Отображает содержимое так, что оно заканчивается у нижнего края ячейки.
На рис. 2.16 показано, как Netscape Navigator отобразит таблицу, определенную следующим HTML-кодом, где в дескрипторах <td> ячеек таблицы использовано каждое из возможных значений атрибута valign:
<table border="1" width="100%" height="100%" ><tr><th width="25%">Выравнивание по вертикали - по верхнему краю</th>
<th width="25%">Выравнивание по вертикали - по центру</th><th width="25%">Выравнивание по вертикали - по базовой линии</th><th width="25%">Выравнивание по вертикали - по нижнему Kpaю</th></tr>
<tr><td width="25%" valign="top">Bвepxy</td><td width="25%" valign="middle">По центру</td><td width="25%" valign="baseline">По базовой линии</td><td width="25%" valign="bottom">Снизу</td><tr></table>
Рис. 2.16. Таблица, иллюстрирующая действие четырех значений атрибута выравнивания по вертикали