<< Предыдущая Оглавление Следующая >>


3.4. Форматирование данных в ячейках таблиц

Теги <tr>, <td> и<th> имеют набор необязательных параметров, позволяющие форматировать данные внутри ячеек таблицы. Так, параметры align и valign задают способ выравнивания содержимого внутри ячеек по горизонтали и вертикали соответственно. Значения данных параметров следующие:

align=left | right | center;
valign=top | bottom | middle.

По умолчанию align=left, а valign=middle, т.е. выравнивание выполняется по левому краю ячейки и центрирование по вертикали.

Следует учитывать, если данные параметры установлены для тега <tr>, задающего строку таблицы, то выравнивание распространяется на все ячейки данной строки, если они не переопределены внутри тегов <td> этой строки. Например,

<table border=1 width="100%">
<tr align=right>
<th>Заголовок 1</th>
<th align=left>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr align=center>
<td>Ячейка<br>1</td>
<td valign=top>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
</table>

Рис. 3.6. Пример выравнивания данных внутри ячеек таблицы

Для определения цвета фона ячейки используется атрибут bgcolor со значением цвета. Например,

<table border=1 width="100%">
<tr align=center bgcolor="#f0f0f0">
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr align=center>
<td bgcolor="#CC0000">Ячейка<br>1</td>
<td bgcolor="#00CC00" valign=top>Ячейка 2</td>
<td bgcolor="#0000CC">Ячейка 3</td>
</tr>
</table>

Рис. 3.7. Пример использования атрибута bgcolor

Следует отметить, что внутри ячеек таблицы могут использоваться любые теги языка HTML, включая и другие таблицы, создавая, таким образом, вложенные таблицы. Следовательно, для более детального форматирования информации внутри ячеек можно использовать, например, теги <b>, <strong>, <font> и др.

Видео по теме

HTML с нуля: урок 1 - как работает Интернет и что такое сайт

HTML с нуля: урок 2 - инструментарий, структура документа, стандарты

HTML с нуля: урок 3 - основные теги форматирования HTML

HTML с нуля: урок 4 - ссылки, теги div и span

HTML с нуля: урок 5 (часть 1) - таблицы

HTML с нуля: урок 5 (часть 2) - фреймы

HTML с нуля: урок 6 - HTML формы, GET и POST запросы

HTML с нуля: урок 7 - поля ввода, кнопки, списки

HTML с нуля: урок 8 - каскадные таблицы стилей, начало

HTML с нуля: урок 9 - CSS, теория

HTML с нуля: урок 10 - пример создания макета HTML страницы

 



<< Предыдущая Оглавление Следующая >>