Элементы colgroup и col

Контейнер <colgroup>...</colgroup> создает в таблице группу столбцов, для которой можно указать свойства стилей. Внутри контейнера <colgroup>...</colgroup> можно задавать одиночные элементы <col>, уточняющие свойства стилей для отдельных столбцов или последовательности столбцов в группе.

Элементы colgroup и col должны располагаться сразу же за элементом table (или элементом caption, если он есть) перед первым появлением элемента tr.

Помимо общих атрибутов class, dir, id, lang, style и title в элементах colgroup и col можно задать атрибут span, задающий количество смежных столбцов, на которые распространяется действие свойств стилей, заданных для элемента (по умолчанию значение этого атрибута равно 1). Кроме этого, в элементах colgroup и col можно задать атрибут align, задающий выравнивание содержимого в ячейках столбца или смежных столбцов. Однако этот атрибут в настоящее время поддерживаются только в Internet Explorer.

Для элементов colgroup и col можно задавать только следующие стили:

· background-color – цвет фона (кроме Internet Explorer);

· background-image – фоновое изображение (кроме Internet Explorer);

· background – интегральное свойство фона (кроме Internet Explorer);

· стили семейства border – границы столбца (действуют только в том, случае, если для таблицы задано свойство border-collapse со значением collapse);

· width –минимальная ширина столбца.

Все остальные стили необходимо задавать отдельно для каждой ячейки столбца.

Пример 4.3.93. Задание элементов colgroup и col:

Добавим в таблицу стилей примера 4.3.92(2) следующие правила стилей:

.colback {

background:yellow;

}

.calbackimg

{

background-image: url('images/background07.jpg');

}

.colborder {

border:thick fuchsia double

}

.colwidth1 {

width:120px

}

.colwidth2 {

width:17%

}

а также добавим в тело документ (после элемента caption) следующие элементы:

<colgroup span="2" class="colback">

<col span="1"/>

<col class="calbackimg"/>

</colgroup>

<colgroup>

<col span="3" class="colwidth2"/>

</colgroup>

<colgroup>

<col class="colborder">

</colgroup>

С помощью этих элементов в таблице задаются три группы столбцов: первая группа из двух столбцов, для которой задан цвет фона, вторая группа из трех столбцов, для которой задана ширина каждого столбца группы и третья группа из одного столбца. Для второго столбца первой группы задано фоновое изображение, а для столбца третьей группы задана граница.

С приведенными изменениями таблица примера 4.3.92(2) примет следующий вид (в Web-браузерах Firefox, Opera и Safari):