Заголовок таблицы

Для создания заголовка таблицы служит тэг <CAPTION>.

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

Следует сказать, что стандарт HTML не позволяет ставить одной таблице несколько заголовков.

Пример:

HTML-код: <table border="1"> <caption> Заголовок таблицы </caption>  <tr>   <td>1</td>   <td>2</td>  </tr> </table>

Отображение в браузере: Заголовок таблицы 1 2

Группирование столбцов

Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>.

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

Дескриптор <COL> предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.

Пример:

HTML-код: <table border="1"> <colgroup span="1" style="color:red"></colgroup> <colgroup span="2">  <tr>   <th>Товар</th>   <th>Цена</th>   <th>Кол-во</th>  </tr>  <tr>   <th>Гайка</th>   <td>20р</td>   <td>50</td>  </tr>  <tr>   <th>Болт</th>   <td>30р</td>   <td>80</td>  </tr> </table> <br> <table border="1"> <col span="1" style="color:green"> <col span="2" style="color:red">  <tr>   <th>Товар</th>   <th>Цена</th>   <th>Кол-во</th>  </tr>  <tr>   <th>Гайка</th>   <td>20р</td>   <td>50</td>  </tr>  <tr>   <th>Болт</th>   <td>30р</td>   <td>80</td>  </tr> </table>

Отображение в браузере: Товар Цена Кол-во Гайка 20р 50 Болт 30р 80 Товар Цена Кол-во Гайка 20р 50 Болт 30р 80

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

Для группирования строк таблицы служат тэги <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 Итоговая строка

Таблицы ч.2

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

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

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

Изменение размеров таблицы