<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> с определёнными стилями. Но такое решение будет более громоздким и менее удобным в поддержке, особенно для больших таблиц.