Объединение элементов таблиц.

Для создания сложных таблиц не обойтись без объединения строк и столбцов. Для объединения ячеек соседних строк и столбцов таблицы, в HTML используются атрибуты ROWSPAN и COLSPAN тегов <TH> и <TD>. Данные атрибуты задают количество объединяемых ячеек в строке (ROWSPAN=N) или столбце (COLSPAN=N). Рассмотрим использование данных атрибутов на примере таблицы.

HTML код таблицы:

<TABLE BORDER ALIGN=CENTER>

<TR ALIGN=CENTER>

<TH COLSPAN=3>ДРУЗЬЯ И ПОДРУГИ</TH>

</TR>

<TR ALIGN=CENTER>

<TD ROWSPAN=2>ДРУЗЬЯ</TD><TD>Коля</TD><TD>44-44-44</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Вася</TD><TD>33-33-33</TD>

</TR>

<TR ALIGN=CENTER>

<TD ROWSPAN=2>ПОДРУГИ</TD><TD>Маша</TD><TD>11-11-11</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Глаша</TD><TD>22-22-22</TD>

</TR>

</TABLE>

Внешний вид таблицы:

В стандарте HTML 4 появились новые теги для группировки (не объединения, а именно группировки) строк и столбцов таблицы в группы с общими свойствами. Это теги <COLGROUP> и <COL> - группировка и описание свойств столбцов, <THEAD> - определение шапки таблицы, <TBODY> - определение группы тело-таблицы, <TFOOT> - определение нижней строки. Полезным атрибутом тегов <COLGROUP> и <COL> является атрибут SPAN=N, который распространяет свойства, заданные данными тегами на N-столбцов в группе.

Использование данных тегов существенно облегчает компоновку и форматирование таблиц. Схема их применения следующая (в данном примере применяется одиночная форма записи тегов <THEAD>, <TBODY> и <TFOOD>, но в случае использования одного из них, необходимо применять элементную форму):

<TABLE атрибуты таблицы>

<COLGROUP общие атрибуты 1-ой группы>

<COL SPAN=10 доп. атрибуты первых 10 столбцов таблицы>

<COL доп. атрибуты 11 столбца таблицы>

...

<COLGROUP общие атрибуты последней группы>

<COL доп. атрибуты j столбца таблицы>...<COL доп. атрибуты N столбца таблицы>

<THEAD>

<TH><TH>1 заголовок</TH>...<TH>N заголовок</TH><TR>

<TBODY>

<TR><TD>1 столбец</TD>...<TD>N столбец</TD><TR>

...

<TR><TD>1 столбец</TD>...<TD>N столбец</TD><TR>

<TFOOT>

<TR><TD>1 итоговый столбец</TD>...<TD>N итоговый столбец</TD><TR>

</TABLE>

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

А вот результат обоих наших деяний:

Для закрепления материала, рассмотрим пример HTML документа, использующего таблицы (обратите внимание, что размер ячеек, содержащих изображение, задан соответствующим размеру изображения).

Пример 5. Форматирование таблиц.