/html/colgroup:> Параметры группы столбцов_

Элемент colgroup

Синтаксис

HTML
XHTML
<table>
  <caption> ... </caption>
  <colgroup> ... </colgroup>
или
  <colgroup>
  <thead> ... </thead>
  <tbody> ... </tbody>
</table>

Описание

Элемент colgroup (от англ. "column group" ‒ «группа столбцов») группирует элементы col и задаёт им единые параметры.

Примечание

Если внутри группы разным колонкам необходимо задать разные параметры, то это можно сделать с помощью дочерних элементов col.

Условия использования

  • Данный элемент должен располагаться внутри элемента table до элементов thead, tbody, tr или tfoot.
  • Если у данного элемента присутствуют дочерние элементы col, то использование атрибута «span» запрещено.
  • В HTML при использовании данного элемента желательно (а при наличии вложенных элементов col ‒ обязательно) использовать закрывающий тег ‒ «</colgroup>». При использовании данного элемента в XHTML без закрывающего тега ‒ элемент colgroup необходимо закрывать ‒ «<colgroup />».

Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

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

Верс. Раздел
HTML
2.0 ---
3.2 ---
4.01 11.2.4 Column groups: the COLGROUP and COL elements
The COLGROUP element

DTD: Transitional Strict Frameset
5.0 4.9.3 The colgroup element
5.1 4.9.3. The colgroup element
XHTML
1.0 Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1 Extensible HyperText Markup Language

Атрибуты

align
Задаёт выравнивание ячеек столбца(-ов).
char
Выравнивает содержимое ячеек столбца(-ов) по указанному значению (символу).
charoff
Смещает содержимое ячеек столбца(-ов) на указанное количество символов.
span
Задаёт количество столбцов к которым необходимо применить указанные свойства стилей.
valign
Устанавливает вертикальное выравнивание во всех ячейках группы столбцов.
width
Задаёт ширину столбца(-ов)/ячеек столбца(-ов).
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент colgroup</title>
<link type="text/css" href="/html/col/ex-style.css" rel="stylesheet">
</head>
<body>
<h1>Пример с элементом "colgroup"</h1>
<table>
<caption>Разноцветная таблица</caption>
<colgroup style="background-color: yellow;">
<col style="width: 200px;">
<col style="width: 100px;">
</colgroup>
<col style="background-color: pink;">
<tbody>
<tr> <td>Желтый (200px)</td> <td>Желтый (100px)</td> <td>Розовый (auto)</td> </tr>
<tr> <td>Желтый (200px)</td> <td>Желтый (100px)</td> <td>Розовый (auto)</td> </tr>
</tbody>
</table>
</body>
</html>
Элемент colgroup