HTML: Table, colgroup, col

By Xah Lee. Date: . Last updated: .

HTML table tags: colgroup, col

colgroup

Group table columns for styling.

col

Used inside colgroup

Colgroup tag

colgroup has no effect on the rendering of the table, but is useful together with CSS to color columns (instead of adding a style to every td tag). [see CSS: Basics. Index]

The colgroup tag must come before any {tr, thead, tbody, tfoot}. [see HTML: Table, caption, thead, tbody, tfoot]

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

Code

<table border="1">
<colgroup span="1" style="background: silver"></colgroup>
<colgroup span="3" style="background: aqua"></colgroup>
<colgroup span="2" style="background: yellow"></colgroup>
<colgroup span="3" style="background: 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>

Col tag

Alternatively, you can also use the col tag instead of <colgroup span=val>.

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 is the relevant source code:

<colgroup style="background: silver"><col span="1" /></colgroup>
<colgroup style="background: aqua"><col span="3" /></colgroup>
<colgroup style="background: yellow"><col span="2" /></colgroup>
<colgroup style="background: gray"><col span="3" /></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 /></colgroup>

instead of:

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

Browser support

The colgroup and col tags are supported in all major browsers as of 2011-07-30.

HTML Table