HTML Table, colgroup, col

By Xah Lee. Date: . Last updated: .

HTML table has a <colgroup> tag. It is used to indicate that several columns are a group.

<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]

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:silver"></colgroup>
<colgroup span="3" style="background-color:aqua"></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}. [see HTML Table, thead, tbody, tfoot]

Using 「col」 tag

Alternatively, you can also use the col tag instead of <colgroup 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:silver"><col span="1" /></colgroup>
<colgroup style="background-color:aqua"><col span="3" /></colgroup>
<colgroup style="background-color:yellow"><col span="2" /></colgroup>
<colgroup style="background-color: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 .

HTML Table Topic

  1. HTML Table Examples
  2. HTML Table, thead, tbody, tfoot
  3. HTML Table, colgroup, col
  4. Styling HTML Table with CSS
  5. CSS: 3 Columns Page Layout
  6. Pure CSS Table
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon