HTML table colgroup
The <colgroup> element is used to style specific columns of a table.
If you want to style the two first columns of a table, use the <colgroup> and <col> elements.
| 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 |
The <colgroup> element should be used as a container for the column specifications.
Each group is specified with a <col> element.
The span attribute specifies how many columns that get the style.
The style attribute specifies the style to give the columns.
Example:
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
Note: The <colgroup> tag must be a child of a <table> element and should be placed before any other table elements, like <thead>, <tr>, <td> etc., but after the <caption> element, if present.
Legal CSS Properties
There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:
- width property
- visibility property
- background properties
- border properties
All other CSS properties will have no effect on your tables.
Multiple Col Elements
If you want to style more columns with different styles, use more <col> elements inside the <colgroup>:
Example:
<colgroup>
<col span="2" style="background-color: purple">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
Empty Colgroups
If you want to style columns in the middle of a table, insert a "empty" <col> element (with no styles) for the columns before:
Example:
<colgroup>
<col span="2"
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
Hide Columns
You can hide columns with the visibility: collapse property:
Example:
<colgroup>
<col span="2"
<col span="3" style="visibility: collapse;">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>