Тег <colgroup>

Тег <colgroup> (укр. — “група стовпців”) в HTML використовується для групування одного або кількох стовпців таблиці з метою їхньої стилізації або структурної організації. Дає змогу застосовувати стилі до цілих груп стовпців через вкладені елементи <col>.

Допомагає спростити управління розміткою таблиць, особливо при складній таблиці з великою кількістю стовпців.

Атрибути

Специфічні атрибути

  • span — визначає кількість стовпців, які покриває ця група (при відсутності вкладених <col>). Наприклад:
<colgroup span="3"></colgroup>

Глобальні атрибути

Тег <colgroup> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<colgroup id="price-columns">
    ...
</colgroup>
  • class — для CSS-стилізації. Наприклад:
<colgroup class="table-columns">
    ...
</colgroup>
  • style — для інлайн-стилів (рідко використовується напряму). Наприклад:
<colgroup style="background-color: #eee;">
    ...
</colgroup>

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

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання colgroup</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .product-column {
            background-color: #e3f2fd;
        }
        .price-column {
            background-color: #fce4ec;
            text-align: right;
        }
    </style>
</head>
<body>

<h2>Таблиця з colgroup:</h2>

<table>
    <colgroup>
        <col class="product-column">
        <col class="price-column">
    </colgroup>
    <thead>
        <tr>
            <th>Товар</th>
            <th>Ціна</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ноутбук</td>
            <td>1500</td>
        </tr>
        <tr>
            <td>Смартфон</td>
            <td>800</td>
        </tr>
    </tbody>
</table>

</body>
</html>

Додаткові моменти

  • Тег <colgroup> обов’язково розташовується всередині таблиці — одразу після відкриття тега <table>, але перед <thead>, <tbody>, <tfoot>.
  • Може містити один або більше тегів <col>.
  • Дозволяє централізовано стилізувати стовпці без дублювання стилів у кожній клітинці.
  • Може комбінуватися з span для групування кількох стовпців без явного перерахування <col>.
  • Атрибут span використовується рідко, оскільки частіше внутрішньо застосовуються окремі теги <col>.
  • Не впливає на доступність, але спрощує підтримку великих таблиць.
  • Підтримується всіма сучасними браузерами.