Что делает тег

Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023