Тег colgroup (от английского column group, «группа колонок») описывает колонки таблицы. Сам он на экране ничего не рисует: его задача - дать одно правило сразу нескольким колонкам, например общую ширину, фон или скрытие. Без него пришлось бы повторять то же правило в каждой ячейке колонки.
Тег парный и записывается внутри table, до строк. Внутри него записывают теги col или не записывают ничего, если колонки задаёт атрибут span. Отдельная колонка col разобрана на своей странице, а здесь - сама группа: куда её записать, как работает span и какие стили доходят до колонок.
<table>
<colgroup span="2" style="width:100px"></colgroup>
<tr><th>Чай</th><th>Цена</th><th>Вес</th></tr>
<tr><td>Улун</td><td>120</td><td>50</td></tr>
</table>В этой статье
- Тег colgroup в HTML: что это и где он стоит в таблице
- Как записать colgroup: span или вложенные col
- Ширина колонок через colgroup
- Фон и граница колонки через colgroup: что закрашивается, а что нет
- Скрытие колонки через colgroup: visibility collapse
- Какие стили colgroup не доходят до ячеек и чем их заменить
- Частые ошибки с тегом colgroup
Тег colgroup в HTML: что это и где он стоит в таблице
Таблица в HTML записывается строками. Колонок как отдельных элементов в ней нет: колонка - это ячейки, которые стоят друг под другом. Тег colgroup добавляет в таблицу описание колонок. К этому описанию применяются стили, и браузер применяет их к нужным колонкам.
У тега строгое место: он дочерний элемент table, стоит после тега caption и до любой секции или строки. Групп в таблице может быть несколько, и идут они подряд.
Порядок в table | Что записывается | Пример записи |
|---|---|---|
| 1 | caption, если он нужен | <caption>Цены на чай</caption> |
| 2 | Одна или несколько групп colgroup | <colgroup span="2"></colgroup> |
| 3 | thead, затем tbody и tfoot | <thead>...</thead> |
| 3 (вместо секций) | Просто строки tr | <tr><td>Улун</td></tr> |
Важно понимать, чего тег не делает. Он не объединяет ячейки, не задаёт заголовки колонок и для скринридера ничего не сообщает. Заголовками колонок остаются ячейки th, а объединением занимаются атрибуты colspan и rowspan.
Как записать colgroup: span или вложенные col
Колонки в группе описываются одним из двух способов, и смешивать их нельзя. Первый способ: атрибут span с числом колонок, а внутри группы пусто. Второй: внутри группы записаны теги col, по одному на колонку. Если в группе есть вложенные col, значение span у группы игнорируется.
Значение span браузер приводит к целому числу от 1 до 1000. Всё остальное он исправляет сам, без ошибок в консоли.
Значение span | Что получится | Пример записи |
|---|---|---|
| Не задан | Одна колонка | <colgroup></colgroup> |
| Целое от 1 до 1000 | Столько колонок, сколько указано | <colgroup span="3"> |
0 или отрицательное | Браузер считает, что колонка одна | <colgroup span="0"> |
| Больше 1000 | Браузер обрезает значение до 1000 | <colgroup span="1001"> |
| Дробное, например 2.7 | Дробная часть отбрасывается, колонок две | <colgroup span="2.7"> |
| Не число | Браузер считает, что колонка одна | <colgroup span="abc"> |
Пример: span у группы или вложенные col
Выберите запись: сверху виден код, ниже - таблица и ширина каждой колонки. Третий вариант показывает, что при вложенном col значение span не работает.
В четвёртом варианте видно ещё одно правило: ширина, заданная группе, достаётся вложенным колонкам, у которых своей ширины нет. Колонка со своей шириной берёт её, а остальные получают ширину группы.
Групп может быть несколько. Например, первая группа из двух колонок получает одну ширину, а вторая, из одной колонки, другую.
<colgroup span="2" style="width:100px"></colgroup>
<colgroup style="width:150px"></colgroup>Закрывающий тег стандарт разрешает опустить, если после него нет пробела или комментария, а начальный тег можно не писать, если группа начинается с col: браузер создаст группу сам. Так и происходит: таблица с голыми col сразу после table получает группу без вашего участия. Но явная запись понятнее читателю кода и не зависит от пробелов и комментариев. Подробности о порядке записи - в описании элемента в стандарте HTML.
Ширина колонок через colgroup
Ширину колонкам задают свойством width у colgroup или col. У тега col есть и устаревший атрибут width, но в новом коде пишут CSS. Главное, что нужно знать: заданная ширина работает как желаемая, а не как жёсткая. Браузер выполнит её, если содержимое помещается, и растянет колонку, если нет.
| Ситуация | Что получается | Пример записи |
|---|---|---|
| Ширина в пикселях | Колонка получает эту ширину, если в неё помещается содержимое | <col style="width:100px"> |
| В ячейке слово длиннее заданной ширины | Колонка шире заданной: слово не режется | <col style="width:20px"> |
Ширина колонки больше, чем width у ячейки | Побеждает колонка: ячейка её не сужает | <col style="width:300px"> |
| Проценты | Доли от ширины таблицы | <col style="width:50%"> |
Таблица с table-layout: fixed | Ширины берутся из колонок, а остаток достаётся колонке без ширины | table { table-layout: fixed; } |
span больше числа колонок | Лишние колонки тоже занимают место, и таблица становится шире. Стандарт считает это ошибкой: колонки без ячеек | <col span="5" style="width:50px"> |
О том, как ведёт себя ширина всей таблицы и как работает table-layout, рассказано в разделе о ширине тега table. Тег colgroup полезен тем, что ширину колонок можно записать один раз в начале таблицы, а не искать по ячейкам.
table {
table-layout: fixed;
width: 600px;
}
colgroup:first-of-type { width: 100px; }Фон и граница колонки через colgroup: что закрашивается, а что нет
Свойство background у colgroup закрашивает все колонки группы. Этот приём удобен, чтобы выделить колонку цветом, не трогая ячейки. Но у фона есть правила, о которых часто не знают.
Во-первых, слои. Колонки находятся под ячейками: порядок от нижнего к верхнему такой: таблица, группа колонок, колонка, секция, строка, ячейка. Поэтому своё оформление ячейки перекрывает фон колонки. Во-вторых, фон колонки не закрашивает промежутки между ячейками, если они есть (по умолчанию у таблицы они есть). В-третьих, граница у колонки работает только в режиме border-collapse: collapse.
| Свойство | Работает у колонки | Пример записи |
|---|---|---|
background | Да, но не в промежутках между ячейками | colgroup { background: #ffd9a8; } |
border | Только при border-collapse: collapse | col { border: 3px solid red; } |
width | Да, как желаемая ширина | col { width: 100px; } |
visibility | Только значение collapse | col { visibility: collapse; } |
Пример: фон и граница колонки
Выберите, где задан стиль, и включите border-collapse: collapse. Так видно, что фон не заходит в промежутки, а граница появляется только после включения режима.
Устаревший атрибут bgcolor стандарт для colgroup не описывает. В некоторых браузерах он работает по старой привычке, но полагаться на него не стоит. Цвет задают через CSS.
Скрытие колонки через colgroup: visibility collapse
Колонку или всю группу можно убрать из таблицы без правки ячеек: значение visibility: collapse схлопывает колонки. Ячейки скрываются, а место, которое они занимали, освобождается и таблица становится уже. Правило у colgroup убирает сразу все колонки группы, а у col - одну.
Обычные способы скрыть элемент тут не работают: visibility: hidden и display: none у col колонку не убирают. Она остаётся на месте, ширина таблицы не меняется. Это видно в примере ниже.
Пример: схлопнуть колонку, спрятать, убрать через display
Выберите правило: внизу показано, сколько колонок исчезло и насколько уже стала таблица. Значение считает сама страница.
| Правило | Результат | Пример записи |
|---|---|---|
visibility: collapse у col | Одна колонка убрана, место освобождено | col { visibility: collapse; } |
visibility: collapse у colgroup | Убраны все колонки группы | colgroup { visibility: collapse; } |
visibility: hidden у col | Колонка на месте, ничего не изменилось | col { visibility: hidden; } |
display: none у col | Колонка на месте, ничего не изменилось | col { display: none; } |
Чтобы переключать колонку кнопкой, добавьте группе класс, а в CSS запишите для него правило visibility: collapse. Скрипту остаётся только включать и выключать класс.
const group = document.querySelector('colgroup');
group.classList.toggle('is-hidden');colgroup.is-hidden {
visibility: collapse;
}Какие стили colgroup не доходят до ячеек и чем их заменить
Главная ловушка тега: колонка не является родителем ячеек в дереве элементов. Поэтому обычные свойства, которые наследуются вниз, до ячеек не доходят. Правило text-align: right у colgroup числа не выровняет, цвет текста и жирность тоже не изменятся, а отступы не добавятся.
| Свойство | Доходит до ячеек колонки | Чем заменить |
|---|---|---|
color | Нет | td:nth-child(2) { color: #0f7a70; } |
font-weight | Нет | td:nth-child(2) { font-weight: 700; } |
text-align | Нет | td:nth-child(2) { text-align: right; } |
padding | Нет | td:nth-child(2) { padding: 6px 12px; } |
align как атрибут | Нет, атрибут устарел | Свойство text-align у ячеек |
Обход простой: выбрать ячейки нужной колонки по номеру. Селектор td:nth-child(2) берёт вторую ячейку каждой строки, то есть вторую колонку. Чтобы правило действовало только в таблицах, где есть группа колонок, добавьте условие с :has().
Пример: какое правило дошло до ячеек
Выберите правило: страница читает итоговое выравнивание ячейки и показывает, дошло ли правило. Первые два варианта до ячеек не доходят.
table:has(colgroup) td:nth-child(2) {
text-align: right;
}Запомнить это проще так: группа и колонка отвечают только за ширину, фон, рамку и скрытие, а всё, что связано с текстом, оформляйте в ячейках.
Частые ошибки с тегом colgroup
Вот ошибки, которые встречаются чаще всего.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<colgroup span="2"><col></colgroup> | Значение span игнорируется: колонка одна | Оставить один способ: либо span, либо вложенные col |
colgroup { text-align: right; } | Выравнивание до ячеек не доходит | td:nth-child(2) { text-align: right; } |
col { border: 2px solid; } в обычной таблице | Рамка не рисуется | Добавить border-collapse: collapse таблице |
col { display: none; } или visibility: hidden | Колонка остаётся на месте | col { visibility: collapse; } |
Текст внутри colgroup | Браузер выносит текст из таблицы, он оказывается перед ней | Записать текст в абзац вне таблицы |
colgroup после строк таблицы | Браузер может применить ширину и так, но стандарт требует место до строк | Записывать группу сразу после caption |
<col span="5"> при трёх колонках | Две лишние колонки прибавляют ширину таблице, а стандарт считает такую таблицу ошибочной | Указывать span по числу колонок |
Устаревшие align, valign, char, charoff | Выравнивание не меняется | Свойства text-align и vertical-align у ячеек |
bgcolor="#ffd9a8" и width как атрибуты у colgroup | Стандарт их для colgroup не описывает, в некоторых браузерах они работают по старой привычке | Писать background и width в CSS |
| Группа вместо заголовков колонок для скринридера | Группа ничего не сообщает: заголовки задаются только ячейками | <th scope="col">Цена</th> |
