Элемент <colgroup> используется для оформления определенных столбцов таблицы.
Оформление таблицы
Если вы хотите оформить два первых столбца таблицы, используйте элементы <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>
...
Попробуйте сами »