HTML -таблица Colgroup
Элемент <colgroup>используется для стилизации определенных столбцов таблицы.
HTML-таблица Colgroup
Если вы хотите стилизовать два первых столбца таблицы, используйте
элементы
<colgroup>
и .<col>
| ПН | ВТ | МЫ Б | СОБИРАТЬ | ПТ | СИДЕЛ | СОЛНЦЕ |
|---|---|---|---|---|---|---|
| 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 для colgroups .
Пример
<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>
...