Группирование строк документа html

Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>.

<THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

<TBODY> - применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные.

<TFOOT> - позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

Пример:

HTML-код:

<table border="1">

<thead style="color:green">

 <tr>

  <th>Товар</th>

  <th>Цена</th>

  <th>Кол-во</th>

 </tr>

</thead>

 <tr>

  <th>Гайка</th>

  <td>20р</td>

  <td>50</td>

 </tr>

 <tr>

  <th>Болт</th>

  <td>30р</td>

  <td>80</td>

 </tr>

<tfoot>

 <tr>

  <td colspan="3" align="center">Итоговая строка</td>

 </tr>

</tfoot>

</table>

Отображение в браузере:

Товар	Цена	Кол-во
Гайка	20р	50
Болт	30р	80
Итоговая строка

Задание цвета элементов таблицы html страницы

При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.

Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.

Пример:

HTML-код:

<table border="1">

 <tr bgcolor="#ff00ff">

  <td>1</td>

  <td>2</td>

 </tr>

 <tr bgcolor="#5555ff">

  <td>3</td>

  <td>4</td>

 </tr>

</table>

Отображение в браузере:

1	2
3	4

Графический фон таблицы html страницы

При помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта.

Пример:

HTML-код:

<table background="img/sea.jpg">

 <tr>

  <td>11111</td>

  <td>22222</td>

 </tr>

 <tr>

  <td>33333</td>

  <td>44444</td>

 </tr>

</table>

Отображение в браузере:

Выравнивание данных в таблице html страницы

Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.

Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.

Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине. Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.

Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.

Пример:

HTML-код:

<table border="1" cellpadding="5">

 <tr>

  <td align="right">1111<br>2222</td>

  <td valign="top" align="center">22222</td>

 </tr>

 <tr>

  <td>Нижняя ячейка</td>

  <td>Нижняя ячейка</td>

 </tr>

</table>

Отображение в браузере:

1111 2222	22222
Нижняя ячейка	Нижняя ячейка