<colgroup>

Тег <colgroup> создан для группировки одного или нескольких столбцов в таблице, чтобы их можно было стилизовать. Обычно он используется в сочетании с тегами <table> и <col>.

<colgroup>
  <col>
  <col>
  ...
</colgroup>

Атрибут span — количество столбцов в группе.

Примеры использования

Группировка нескольких столбцов вместе:

<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> может использоваться только как дочерний тег <table>.
• Атрибут span нельзя использовать вместе с тегом <col> внутри тега <colgroup>.

Нюансы

• Если <colgroup> используется без тегов <col>, то он не влияет на таблицу.
• Если в одной таблице используется несколько тегов <colgroup>, порядок их появления влияет на стиль таблицы.

Чем заменить тег

Тег можно заменить тегом <col> с определёнными стилями. Но такое решение будет более громоздким и менее удобным в поддержке, особенно для больших таблиц.