<colgroup>
- 25 января 2023
Что делает тег
Тег <colgroup>
создан для группировки одного или нескольких столбцов в таблице, чтобы их можно было стилизовать. Обычно он используется в сочетании с тегами <table>
и <col>
.
Синтаксис тега <colgroup>
<colgroup>
<col>
<col>
...
</colgroup>
Спецификация HTML
Тег является частью спецификации HTML Living Standart.
Семантический или нет
Тег <colgroup>
является семантическим, поскольку предоставляет браузеру дополнительную информацию о структуре таблицы.
Примеры использования
Группировка нескольких столбцов вместе:
<table>
<colgroup>
<col style="background-color: yellow;">
<col>
<col>
</colgroup>
<tr>
<th>Месяц/th>
<th>Отложили</th>
<th>Потратили</th>
</tr>
<tr>
<td>Январь</td>
<td>1000 ₽.</td>
<td>5000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>8000 ₽</td>
<td>7000 ₽</td>
</tr>
</table>
Применение стиля к нескольким столбцам:
<table>
<colgroup>
<col class="highlighted">
<col>
<col class="highlighted">
</colgroup>
<tr>
<th>Месяц</th>
<th>Отложили</th>
<th>Потратили</th>
</tr>
<tr>
<td>Январь</td>
<td>1000 ₽</td>
<td>5000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>8000 ₽</td>
<td>7000 ₽</td>
</tr>
</table>
<style>
.highlighted {
background-color: yellow;
}
</style>
Для чего использовать тег <colgroup>
- Сгруппировать колонки.
- Применить стиль к нескольким столбцам с помощью классов.
Атрибуты тега <colgroup>
span
— количество столбцов в группе.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- Тег
<colgroup>
может использоваться только как дочерний тег<table>
. - Атрибут
span
нельзя использовать вместе с тегом<col>
внутри тега<colgroup>
.
Нюансы
- Если
<colgroup>
используется без тегов<col>
, то он не влияет на таблицу. - Если в одной таблице используется несколько тегов
<colgroup>
, порядок их появления влияет на стиль таблицы.
Поддержка браузерами
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <colgroup>
не существует.
Чем заменить тег
Тег можно заменить тегом <col>
с определёнными стилями. Но такое решение будет более громоздким и менее удобным в поддержке, особенно для больших таблиц.
Актуальность
Тег <colgroup>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023