HTML Група стовпців таблиці
Елемент <colgroup> використовується для стилізації визначених стовпців таблиці.
HTML Група стовпців таблиці
Якщо ви хочете оформити два перших стовпця таблиці, використовуйте елементи <colgroup> та <col>.
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Елемент <colgroup> слід використовувати в якості контейнера для специфікацій стовпця.
Кожна група вказується за допомогою елемента <col>.
Атрибут span вказує, скільки стовпців отримує стиль.
Атрибут style вказує стиль, що застосовується до стовпців.
Примітка: Існує дуже обмежений вибір дозволених CSS властивостей для груп стовпців.
Приклад
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Спробуйте самі »
Примітка: Тег <colgroup> має бути дочірнім елементом елемента <table> і має розташовуватись перед будь-якими іншими елементами таблиці, такими як <thead>, <tr>, <td> і т.д., але після елемента <caption>, якщо він присутній.
Дозволені CSS властивості
Існує лише дуже обмежений набір CSS властивостей, які дозволено використовувати в colgroup:
width властивість
visibility властивість
background властивість
border властивість
Все остальные свойства CSS не повлияют на ваши таблицы.
Кілька елементів Col
Якщо ви хочете оформити більше стовпців з різними стилями, використовуйте більше елементів <col> всередині <colgroup>:
Приклад
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Спробуйте самі »
Пусті групи стовпців
Якщо ви хочете оформити стовпці в середині таблиці, вставте "пусті" елементи <col> (без стилів) для стовпців перед:
Приклад
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Спробуйте самі »
Приховати стовпці
Ви можете приховати стовпці за допомогою властивості visibility: collapse:
Приклад
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Спробуйте самі »
