HTML таг colgroup

Пример

Кратък пример как се използва тагът <colgroup>.

<table class="table table-bordered text-center">
  <colgroup>
    <col span="1" style="background-color:#f8f9fa; width:30%;">
    <col span="2" style="background-color:#e9f7ff;">
  </colgroup>
  <thead class="table-light">
    <tr>
      <th>Продукт</th>
      <th>Цена</th>
      <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ябълки</td>
      <td>2.50 лв.</td>
      <td>5 кг</td>
    </tr>
    <tr>
      <td>Портокали</td>
      <td>3.10 лв.</td>
      <td>3 кг</td>
    </tr>
  </tbody>
</table>

Дефиниция и употреба

Елементът <colgroup> се използва вътре в таблица (<table>), за да групира една или повече колони и да им прилага общи стилове или атрибути. Той не съдържа реални данни, а описва структурата и външния вид на колоните.

Обикновено <colgroup> се поставя непосредствено след отварящия таг <table> и преди <thead>, <tbody> или редовете <tr>. Вътре в него се използват един или повече елемента <col>, чрез които се задават ширина, фон, видимост и други CSS стилове за цели колони наведнъж.

Типични приложения на <colgroup> са: задаване на фиксирана ширина на колони, оцветяване на определени колони, скриване на колони, както и по-лесно поддържане на големи таблици, където е нужно последователно форматиране на цели колони, вместо на отделни клетки.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути