Элемент colgroup
Элемент colgroup (от англ. » col umn group » ‒ «группа столбцов») группирует элементы col и задаёт им единые параметры.
Примечание
Если внутри группы разным колонкам необходимо задать разные параметры, то это можно сделать с помощью дочерних элементов col .
Условия использования
- Данный элемент должен располагаться внутри элемента table до элементов thead , tbody , tr или tfoot .
- Если у данного элемента присутствуют дочерние элементы col , то использование атрибута « span » запрещено.
- В HTML при использовании данного элемента желательно (а при наличии вложенных элементов col ‒ обязательно) использовать закрывающий тег ‒ «
». При использовании данного элемента в XHTML без закрывающего тега ‒ элемент colgroup необходимо закрывать ‒ «
».
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| 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
Тег HTML группа колонок таблицы
Тег определяет группу из одной или нескольких колонок HTML таблицы. Используется в HTML таблицах определенных тегом .
Тег позволяет определить стили сразу для группы колонок, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем кода таблицы.
Если вам нужно задать стили колонок, вы также можете использовать тег .
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
Вариант 1. без вложенных тегов :
Атрибут span задает количество колонок в группе. Если атрибут span не задан, считается, что его значение равно единице.
Вариант 2. с вложенными тегами :
вложенные теги col Отображение в браузере
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 | Ячейка 7 | Ячейка 8 |
| Ячейка 9 | Ячейка 10 | Ячейка 11 | Ячейка 12 |
Пример использования в HTML коде
Таблица с colgroup
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Ячейка 7
Ячейка 8
Ячейка 9
Ячейка 10
Ячейка 11
Ячейка 12 Разница между тегами и
При использовании колонки таблицы будут объединены в группы, что при использовании атрибута rules=»groups» тега в HTML 4.01 даст возможность выводить только границы групп.
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значения | Описание |
|---|---|---|
| span | число | Количество колонок, которые будут объединены в группу. Используется, если задан без вложенных тегов . |
| Устаревшие атрибуты | ||
| align | left right center justify |
Задает правило выравнивания содержимого группы колонок по горизонтали. В HTML5 используйте CSS. |
| valign | top middle bottom baseline |
Задает правило выравнивания содержимого группы колонок по вертикали. В HTML5 используйте CSS. |
| width | пиксели проценты |
Ширина группы колонок. В HTML5 используйте CSS. |
HTML тег
Тег задает группу столбцов внутри таблицы с общими свойствами. Тег может включать в себя несколько элементов , которые определяют свойства столбцов.
Синтаксис
Тег
обязателен.
В одну HTML таблицу можно включать несколько тегов .
Пример
html> html> head> title>Заголовок документа title> style> table,th,td < border:1px solid black; > style> head> body> table> colgroup> col span="2" style="background-color:#EDEDED; width: 150px;"> col style="background-color:#50F740; width: 50px;"> colgroup> tr> th>Имя th> th>Пол th> th>Возраст th> tr> tr> td>Мэри Николсон td> td>женский td> td>19 td> tr> tr> td>Джон Джонсон td> td>мужской td> td>23 td> tr> table> body> html>Результат
Атрибуты тега
| Атрибут | Значение | Описание |
|---|---|---|
| align | Устанавливает выравнивание содержимого колонки. Не поддерживается в HTML5. |
|
| left | Выравнивает по левому краю. | |
| right | Выравнивает по правому краю. | |
| center | Выравнивает по центру. | |
| justify | Выравнивает по правому и левому краю. | |
| char | Выравнивает по специальному символу с минимальным смещением, которые определены атрибутами char и charoff. | |
| char | character | Выравнивает содержимое колонки по заданному символу. Используется только если атрибут align = «char». Не поддерживается в HTML5. |
| charoff | number | Сдвигает содержимое ячейки относительно заданного символа, указанного как значение атрибута вправо (положительные значения) или влево (отрицательные значения). Используется только если атрибут align = «char». Не поддерживается в HTML5. |
| span | number | Устанавливает количество столбцов, характеристики которых определяет элемент . Число должно быть целым положительным. Если параметр не задан, то по умолчанию значение будет 1. . |
| valign | Выравнивает содержимое по вертикали. Не поддерживается в HTML5. | |
| top | Выравнивает по верхнему краю строки. | |
| bottom | Выравнивает по нижнему краю. | |
| middle | Выравнивает по середине. | |
| baseline | Выравнивает по базовой линии. | |
| width | % pixels relative_length |
Устанавливает ширину колонки. Не поддерживается в HTML5. |
Бирка colgroup HTML
Бирка HTML использована для определять свойства для группы в составе колонки внутри таблица.
Если вам нужно приложить различные свойства к колонке внутри colgroup, то вы можете использовать бирку col HTML внутри бирка colgroup.
Пример
HTML colgroup Tag This example shows a colgroup that has three columns of different widths:
| col 1 | col 2 | col 3 |
Это даст следующий:
This example shows a colgroup that has three columns of different widths:
| col 1 | col 2 | col 3 |
Глобальные атрибуты
Эта бирка поддерживает полностью глобальный описанную атрибутами внутри — справку атрибута HTML
Специфические атрибуты
HTML бирки поддержки также следовать дополнительными атрибутами: