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>
...
Попробуйте сами »
