<colgroup> - тег для групування стовпців таблиці

HTML-елемент<colgroup> використовується для групування одного або декількох стовпців у таблиці з метою їх спільного форматування.

Тег <colgroup> визначає групу з одного або кількох стовпців у таблиці для спільного форматування. Цей елемент є корисним для застосування стилів до цілих стовпців без необхідності додавати класи до кожної комірки (<td> або <th>).

Тег colgroup приклад використання в HTML

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

Атрибути

Цей тег може мати глобальні атрибути.

span: Вказує, на скільки послідовних стовпців поширюються властивості, визначені в <colgroup>. Значення має бути додатним цілим числом. Якщо всередині <colgroup> є хоча б один тег <col>, цей атрибут ігнорується.
align: Визначає вирівнювання вмісту комірок стовпців. Можливі значення: left, center, right, justify, char. Для керування вирівнюванням рекомендується використовувати CSS властивість text-align.
bgcolor: Визначає колір фону для стовпців. Рекомендується використовувати CSS властивість background-color.
char: Вирівнює вміст стовпців по вказаному символу. Працює в парі з align="char".
charoff: Зміщує вміст стовпців відносно символу, вказаного в атрибуті char.
valign: Визначає вертикальне вирівнювання вмісту комірок. Можливі значення: top, middle, bottom, baseline. Рекомендується використовувати CSS властивість vertical-align.
width: Визначає ширину стовпців. Рекомендується використовувати CSS властивість width.

Важливі примітки

Тег <colgroup> може стилізувати стовпці двома способами:

Без тегів <col>: атрибут span застосовується до <colgroup>, щоб визначити, на скільки стовпців поширюються стилі.
З тегами <col>: кожен тег <col> може визначати стилі для одного або кількох стовпців (за допомогою власного атрибута span).

Важливо, що <colgroup> може впливати лише на обмежений набір CSS-властивостей:

border
background
width
visibility (якщо visibility: collapse)

Інші CSS-властивості, такі як color, padding, font, не будуть застосовані до вмісту комірок через <colgroup>.

Технічне резюме

Батьківські елементи	`<table>`. Тег `<colgroup>` має бути після `<caption>` і перед `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`.
Дочірні елементи	Якщо використовується, то один або більше елементів `<col>`.
Пропуск тега	Початковий тег є обов’язковим. Кінцевий тег може бути відсутнім, якщо за ним одразу слідує `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, або якщо більше немає вмісту в батьківському елементі `<table>`.
Роль ARIA	Немає відповідної ролі
Дозволені ролі ARIA	Немає
DOM інтерфейс	`HTMLTableColElement`

Приклади використання

<table>
  <caption>Інформація про книги</caption>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col span="2" style="border: 2px solid #9370db;">
  </colgroup>
  <thead>
    <tr>
      <th>ISBN</th>
      <th>Назва</th>
      <th>Автор</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>978-0321765723</td>
      <td>The C++ Programming Language</td>
      <td>Bjarne Stroustrup</td>
    </tr>
    <tr>
      <td>978-0132350884</td>
      <td>The Clean Coder</td>
      <td>Robert C. Martin</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  caption-side: bottom;
  padding-top: 10px;
  font-style: italic;
}

th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #e2e2e2;
}

<table>
  <caption>Розклад роботи</caption>
  <colgroup span="2" style="background-color: #f9f9f9;"></colgroup>
  <colgroup style="background-color: #e6fff2;"></colgroup>
  <thead>
    <tr>
      <th>День</th>
      <th>Початок</th>
      <th>Кінець</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Понеділок</td>
      <td>09:00</td>
      <td>18:00</td>
    </tr>
    <tr>
      <td>Вівторок</td>
      <td>09:00</td>
      <td>18:00</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  caption-side: bottom;
  padding-top: 10px;
  font-style: italic;
}

th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #e2e2e2;
}

Підтримка браузерів



`colgroup`
`align`
`char`
`charoff`
`span`
`valign`
`width`