/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, data-*, dir, draggable, dropzone, 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>
<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