HTML Table Examples with colgroup and col

Xah Lee, 2011-07-07

HTML table has a “colgroup” tag. It is used to indicate that several columns are a group. It does not change the rendering of the table. However, it is convenient to use it so that you can use CSS on just one tag, instead of adding a class to every “th” tag. Example:

1,1	1,2	1,3	1,4	1,5	1,6	1,7	1,8	1,9
2,1	2,2	2,3	2,4	2,5	2,6	2,7	2,8	2,9

Here's the source code:

<table border="1">
<colgroup span="1" style="background-color:blue"></colgroup>
<colgroup span="3" style="background-color:pink"></colgroup>
<colgroup span="2" style="background-color:yellow"></colgroup>
<colgroup span="3" style="background-color:gray"></colgroup>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
<td>1,5</td>
<td>1,6</td>
<td>1,7</td>
<td>1,8</td>
<td>1,9</td>
</tr>

<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
<td>2,5</td>
<td>2,6</td>
<td>2,7</td>
<td>2,8</td>
<td>2,9</td>
</tr>
</table>

The “colgroup” tag must come before any {tr, thead, tbody, tfoot}.

Using “col” tag

Alternatively, you can also use the “col” tag instead of {colgroup with span}.

1,1	1,2	1,3	1,4	1,5	1,6	1,7	1,8	1,9
2,1	2,2	2,3	2,4	2,5	2,6	2,7	2,8	2,9

Here's the relevant source code:

<colgroup style="background-color:blue"><col span="1"></col></colgroup>
<colgroup style="background-color:pink"><col span="3"></col></colgroup>
<colgroup style="background-color:yellow"><col span="2"></col></colgroup>
<colgroup style="background-color:gray"><col span="3"></col></colgroup>

The “col” tag must always be used inside “colgroup”.

Alternatively, you can just repeat the “col” tag instead of using the “span” attribute. For example, write:

<colgroup><col></col><col></col></colgroup>

instead of:

<colgroup><col span="2"></col></colgroup>

Browser Support

The {colgroup, col} tags are supported in all major browsers as of 2011-07.