Элемент colgroup в html 5

Поддержка браузерами элемента <colgroup>

Элемент <colgroup> поддерживается большинством существующих браузеров.

Описание элемента <colgroup> в HTML5

Элемент <colgroup> используется для группировки колонок в таблице для форматирования.
<colgroup>можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.
Это может понадобиться в том случае, когда несколько колонок таблицы имеют какие-то одинаковые черты форматирования: выравнивание, фоновый цвет, ширину и пр. Тогда, общие признаки можно вынести в элемент <colgroup>, а во вложенных в него элементах <col> перечислить только индивидуальные признаки отдельных столбцов. Это позволяет существенно сократить код описания таблицы и ускорить работу браузеров при отображении таблиц.

Оба элемента поддерживают атрибут span, значением которого является количество группируемых столбцов. Если span не указан, то он считается равным единице.

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

Синтаксис

<table>
    <colgroup параметры></colgroup>
    <tr>
    <td>...</td>
    </tr>
</table>

<col />
<colgroup>
   <col class="second" />
   <col class="myGroup" />
</colgroup>
<col span="2" />

Например,

<table border="1" rules="groups">
    <colgroup style="background-color: orange;">
    <colgroup style="background-color: lightyellow;">
     <col span="3">
     <col span="2">
    </colgroup>
    <tr><td>&nbsp;</td><td>1999</td><td>2000</td><td>2001</td><td>2002</td><td>2003</td></tr>
    <tr><td>Рубашка</td><td>60</td><td>70</td><td>80</td><td>80</td><td>100</td></tr>
    <tr><td>Носки</td><td>3</td><td>6</td><td>4</td><td>6</td><td>7</td></tr>
<tr><td>Куртка</td><td>250</td><td>300</td><td>350</td><td>350</td><td>400</td></tr>
</table>  

Результат данного примера показан на Рис.1

Рис.1. Пример использования элемента <colgroup>

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

Примечание.

Отличие элемента <colgroup> HTML4.1 от HTML5

Большинство атрибутов HTML4.1 не поддерживаются в HTML5.

Элемент <colgroup> в HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:

• align
• char и charoff
• valign
• width

Атрибуты элемента <colgroup> в HTML5

Любой открывающий (или пустой) элемент может содержать атрибуты, определяющие некоторые дополнительные свойства всего элемента. Атрибуты прописываются сразу после имени тега(элемента), отделяясь от него и друг от друга пробелом:

Глобальные атрибуты

Событийные атрибуты