<colgroup> HTML тег

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

Тег <colgroup> корисний для застосування стилів до стовпчиків, замість того щоб встановлювати стилі для кожної клітинки в кожному рядку.

Цей елемент дозволяє зменшити код таблиці за рахунок скорочення атрибутів, що повторюються, і при його наявності браузер починає показувати вміст таблиці, не чекаючи її повного завантаження.

Елемент <colgroup>, зазвичай, використовується в комбінації з елементом <col>, який визначає характеристики однієї або декількох колонок.

Зазвичай закривати цей тег не потрібно, але, якщо <colgroup> виступає як контейнер для елементів <col>, тоді слід додати закриваючий тег </colgroup> в кінці групи.

правити

Порада

Для того, щоб визначити різні властивості стовпчика в межах <colgroup>, використовуйте тег <col> всередині тега <colgroup>.

автор: с3с правити

Нотатка

Тег <colgroup> повинен бути дочірнім елементом <table> та йти після будь-яких елементів <caption> і перед будь-якими елементами <thead>, <tbody>, <tfoot> та <tr>.

автор: с3с правити

Нотатка

Різниця між властивостями <colgroup> і <col> не дуже велика і полягає в наступному. <colgroup> дозволяє об'єднувати колонки в певні групи, а при додаванні атрибута rules="groups" до елемента <table> браузер буде створювати лінію тільки між колонками, створеними за допомогою <colgroup>. В інших випадках поведінка колонок призначених через елементи <colgroup> і <col> ідентична.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<table>


<colgroup атрибут="значення">


<col атрибут="значення">


</colgroup>


...


Елементи таблиці


...


</table>

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1+	1+	1+	4+	9+	3+

Підтримка: мобільні переглядачі

Переглядач
	1+	1+	2+	2+

Приклади

+ запропонувати свій приклад у пісочниці

<table>
    <colgroup>
        <col span="2" class="books">
        <col class="price">
    </colgroup>
    <tr><th>ISBN</th><th>Назва</th><th>Ціна</th></tr>
    <tr><td>3476896</td><td>Мій перший HTML</td><td>53 грн</td></tr>
    <tr><td>5869207</td><td>CSS без сліз</td><td>49 грн</td></tr>
</table>

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid #0172ad;
    padding: 4px 10px;
}

.books { background: #eef6ff; }
.price { background: #ffef9e; }

CSS стиль без задання

colgroup { 


    display: table-column-group;


}