HTML тег <colgroup>

Элемент <colgroup> (от англ. "column group" ‒ «группа столбцов») предназначен для группирования столбцов (колонок) таблицы, с целью задания им определенных свойств. Этот элемент позволяет уменьшить код таблицы за счёт сокращения повторяющихся атрибутов, и при его наличии браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки.
Элемент <colgroup> может состоять из одного, либо нескольких элементов <col>.

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

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

Синтаксис

<table>
  <colgroup>
  <tr>
   <td>...</td>
  </tr>
</table>

Закрывающий тег

Не обязателен.

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

Атрибуты

alignУстарел в HTML5

Устанавливает выравнивание содержимого колонки по краю.

charУстарел в HTML5

Выравнивает содержимое элемента по заданному символу. Атрибут char может быть использован только если атрибут align = "char".

charoffУстарел в HTML5

Атрибут, который позволяет произвести выравнивание элемента с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = "char".

span

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

valignУстарел в HTML5

Задает вертикальное выравнивание содержимого колонки.

widthУстарел в HTML5

Ширина колонок.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <col> со следующими значениями CSS по умолчанию:

colgroup { 
    display: table-column-group;
}

Для <colgroup> допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.

Различия между HTML 4.01 и HTML5

В HTML 5 было удалено 5 атрибутов.

Пример использования:

Элемент <colgroup>

<table width="100%" style="border: 1px solid black;" rules="groups">
<caption>Цветная таблица</caption>
<colgroup>
<col span="2" style="background-color: lime;">
<col style="background-color: yellow;">
</colgroup>
<tbody>
<tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr>
<tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr>
</tbody>
</table>

Спецификации