HTML Table Colgroup
The <colgroup>
element is used to style specific
columns of a table.
HTML Table Colgroup
If you want to style the first two 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 get the style.
The style
attribute specifies the style to give the columns.
Note: There is a very limited selection of legal CSS properties for colgroups.
Example
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
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 multiple columns with different styles, use more than
one
<col>
element inside the
<colgroup>
:
Example
<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>
...
Try it Yourself »
Empty Colgroups
If you want
to style columns in the middle of a table, insert an "empty"
<col>
element (with no
styles) for the columns before:
Example
<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>
...
Try it Yourself »
Hide Columns
You can hide columns with the visibility: collapse
property:
Example
<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>
...
Try it Yourself »