Библиотека

Рассмотрим "простенький" пример. На рисунке вовсе небольшая турнирная таблица выглядящая весьма симпатичненько снаружи.

Совсем иначе выглядит её код.

При одном взгляде на это безобразие оторопь берёт. А если строк будет не 16, а 20, 30...? Сократить код таблицы, в смысле уменьшить количество определителей ячеек, мы не можем - такова спецификация HTML, но мы можем сделать код гораздо нагляднее и яснее для изменения данных.

Как правило, при создании таблиц средствами HTML, веб-мастера используют только теги <table>, <tr>, <td>.
Редко кто использует для ячеек с заголовками тег <th>, обычно пишут <td>текст</td>. Хотя большинство всё-таки где-то встречало информацию, что существуют у таблиц специальные тэги для заголовков и код таблицы может иметь и такой вид.

<TABLE>
<THEAD>
<TR> ...информация "шапки"...
</THEAD>
<TFOOT>
<TR> ...информация футера...
</TFOOT>
<TBODY>
<TR> ...первый ряд данных блока 1...
<TR> ...второй ряд данных блока 1...
</TBODY>
<TBODY>
<TR> ...первый ряд данных блока 2...
<TR> ...второй ряд данных блока 2...
<TR> ...третий ряд данных блока 2...
</TBODY>
</TABLE>

Ряды таблицы могут быть сгруппированы в "шапку", футер и один или более разделов тела документа с помощью элементов THEAD, TFOOT и TBODY соответственно. Это разделение делает возможным для ПА поддерживать прокрутку тела таблицы независимо от "шапки" и футера. Если распечатываются большие таблицы, информация "шапки" и футера может повторяться на каждой странице, содержащей данные таблицы. "Шапка" и футер таблицы должны содержать информацию о столбцах таблицы. Тело таблицы должно содержать ряды данных таблицы. Если элементы THEAD, TFOOT и TBODY установлены, каждый из них содержит группу рядов. Каждая группа рядов должна содержать минимум один ряд, определённый элементом TR.

Однако для таблиц существуют ещё несколько тэгов, которые обычно не используются, поскольку применение их имеет смысл только для больших таблиц. А турнирные таблицы как раз такими и являются.
Рассмотрим пример таблицы, в которой используются все возможные теги. На примере данного HTML-кода попытаемся объяснить теги, предназначенные для верстки таблиц. В смысл информации, содержащейся в таблице, лучше не вникать

<table>
 <caption>Уровень продаж карандашей</caption>
 <colgroup span="3">
<col width="40%" align="center" />
<col width="30%" />
<col width="30%" />
</colgroup>
<thead>
<tr>
<th>Месяц</th>
<th>Продано</th>
<th>Выручка</th>
</tr>
</thead></p>
<tfoot>
<tr>
<td>Период продаж</td>
<td>Количество штук</td>
<td>Доход в у.е.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Июнь</td>
<td>30.000</td>
<td>100</td>
</tr>
<tr>
<td>Июль</td>
<td>60.000</td>
<td>200</td>
</tr>
</tbody>
</table>

А вот так эта таблица выглядит:

Уровень продаж карандашей

Месяц	Продано	Выручка
Период продаж	Количество штук	Доход в у.е.
Июнь	30.000	100
Июль	60.000	200

Повторюсь - основные теги в таблице должны идти именно в таком порядке, т. е. после начала таблицы (<table>) сразу идет ее описание (<caption>), потом свойства столбцов таблицы (<colgroup>), потом заголовок таблицы (<thead>), нижняя часть таблицы (<tfoot>), содержащие информацию о столбцах таблицы и только после всего этого уже тело таблицы (<tbody>), в котором и содержатся все основные данные.

Из всего это многообразия для таблиц обязательными являются лишь элементы <table>, <tr> и <td>. Все остальные могут использоваться по мере необходимости.

Вот здесь они и появились, эти таинственные тэги - COLGROUP и COL. Даю справку:

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

span = integer - Задает количество столбцов в группе, используемых по умолчанию. Должен быть целым числом > 0. ПА должны игнорировать этот атрибут, если элемент COLGROUP содержит один или более элементов COL.

width = length - Этот атрибут определяет ширину по умолчанию для каждого столбца текущей группы столбцов. В дополнение к стандартным значениям в пикселах, процентах, относительных единицах, этот атрибут допускает специальную форму "0*" (нулевая звёздочка), которая означает, что ширина каждого столбца в группе должна быть наименьшей возможной для вмещения содержимого ячейки. Это предполагает, что всё содержимое столбца должно быть известно до того, как его ширина может быть корректно просчитана. Авторы должны помнить, что определение "0*" будет предупреждать визуальные ПА, что таблица не должна отображаться частями.

Этот атрибут переопределяется для любого столбца в группе, чей атрибут width определён в элементе COL.

Прочие атрибуты:

* id, class - идентификаторы документа;
* lang - язык:, dir - направление текста; * title - заголовок элемента;
* style - инлайн-стиль;
* onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутренние события;
* align, char, charoff, valign - выравнивание в ячейке.

В таблице должна содержаться по крайней мере одна группа столбцов. Если группа столбцов не описана явно, то считается, что в таблице одна группа столбцов, содержащая все столбцы таблицы. Элемент COLGROUP определяет группу столбцов в явном виде.

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

<COLGROUP span="40" width="20"> </COLGROUP>

вместо:

Элемент COL

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов

span = число
Этот атрибут, значением которого должно быть целое число больше нуля, определяет число столбцов, "spanned" элементом COL; атрибуты элемента COL распространяются на все столбцы, которые он spans. Значение по умолчанию для этого атрибута - 1 (т.е. элемент COL означает один столбец). Если для атрибута span установлено значение N > 1, атрибуты текущего элемента COL распространяются на следующие N-1 столбец.

width = multi-length
Этот атрибут определяет ширину каждого столбца, spanned текущим элементом COL, используемую по умолчанию. Он имеет то же значение, что и атрибут width для элемента COLGROUP и имеет над ним приоритет.

Атрибуты, определяемые в любом другом месте

* id, class (идентификаторы в пределах документа)
* lang (информация о языке), dir (направление текста)
* title (заголовок элемента)
* style (встроенная информация о стиле)
* onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
* align, char, charoff, valign (выравнивание в ячейках)

Учитывая всё вышесказанное, облегчим код нашей таблицы. То есть сделаем его более читаемым и понятным с использованием тэгов colgroup:

А вот как выглядит наша таблица:

Место Название команды И В Н П МЗ МП О 1 ЦСКА Москва 30 18 8 4 48 20 62 2 "Спартак" Москва 30 16 8 6 47 26 56 3 "Локомотив" Москва 30 14 14 2 41 18 56 4 "Рубин" Казань 30 14 9 7 44 31 51 5 "ФК Москва" Москва 30 14 8 8 36 26 50 6 "Зенит" Санкт-Петербург 30 13 10 7 45 26 49 7 "Торпедо" Москва 30 12 9 9 37 33 45 8 "Динамо" Москва 30 12 2 16 36 46 38 9 "Шинник" Ярославль 30 9 11 10 26 29 38 10 "Томь" Томск 30 9 10 11 28 33 37 11 "Сатурн" Московская обл. 30 8 9 13 23 25 33 12 "Амкар" Пермь 30 7 12 11 25 36 33 13 "Ростов" Ростов-на-Дону 30 8 7 15 26 41 31 14 "Крылья Советов" Самара 30 7 8 15 29 44 29 15 "Алания" Владикавказ 30 5 8 17 27 53 23 16 "Терек" Грозный 30 5 5 20 20 50 20