HTML <colgroup> Column group Tag Reference
The colgroup HTML tag represents a column group, and it's used to apply certain styles (usually using CSS classes) to a sequential group of columns in an HTML table.
The <colgroup> HTML/xHTML tag
The column group tag is used at the start of a table to define a sequential set of columns that need to be given similar style properties, allowing certain styles to be applied to every cell in each column in the group.
The number of columns in a column group can be defined either by including the <col> column tags within the column group, or with the column group tag's "span" attribute.
<colgroup> shares the same advantages as <col>, in that they let you easily assign the same properties (especially widths) to multiple tables. If you have 2 tables on a page, which contain similar data but in differing amounts, if left to its own devices a web browser will automatically resize columns to make each table as short as possible. What you want is a neat way to make the columns in both tables line up etc. That's where the <col> or the multiple column tag <colgroup> come in. (The colgroup is used to assign the same properties to more than one consecutive column.)
By simply assigning a column group to each table, you can assign the same classnames to several columns, even across more than one table. In the example below, we're using column groups to set the widths of multiple columns.When to use the <colgroup> tag (semantic use)
Use <colgroup> to assign class or style properties to multiple consecutive columns within a table.
It's valid in all current versions of HTML and xHTML and it can be a self-closing tag if it contains no <col /> tags, in which case, if you are using xHTML you need to remember the trailing forward-slash />. If it contains <col /> tags you need to remember the closing </colgroup> tag.
Example of <colgroup> tag use
See how the column widths in these 2 tables are different, which doesn't look tidy. Each table has the first column holding an item name, which could be short or long. In the second table, both entries are short, so the browser balances the column widths.
The tables will look much better if the first column is set to a wide subsequent columns have the same width, and give all the subsequent measurement columns the same width, as they contain predictable data.
| Item | Ht | Wi | Dp | Pr |
|---|---|---|---|---|
| Large dining table | 34in | 45in | 44in | $149 |
| Queen Anne desk | 42in | 19.5in | 87in | $299 |
| Wardrobe | 76in | 33in | 29.5in | $98 |
| Item | Ht | Wi | Dp | Pr |
|---|---|---|---|---|
| Chaise | 27in | 34in | 45in | Apply now |
| Chest | 25in | 39in | 41in | $99-$149 |
The xHTML markup
The fix
One way to fix the column widths would be to use the same set of <col> tags in each table, but this would mean defining a series of 5 columns in each table. More tags than we need.
But because the 4 dimension columns are going to share the same style, and in a consecutive sequence, a better way to give all the columns the same width is to use the <colgroup> tag.
| Item | Ht | Wi | Dp | Pr |
|---|---|---|---|---|
| Large dining table | 34in | 45in | 44in | $149 |
| Queen Anne desk | 42in | 19.5in | 87in | $299 |
| Wardrobe | 76in | 33in | 29.5in | $98 |
| Item | Ht | Wi | Dp | Pr |
|---|---|---|---|---|
| Chaise | 27in | 34in | 45in | Apply now |
| Chest | 25in | 39in | 41in | $99-$149 |
The xHTML & CSS markup
Changes shown in red. The class "itemsDesc" applies to a single column only, whereas the class "itemsDims" applies to the next 4 columns, as it's attached to a colgroup with a span of 4 columns.
table .itemsDims {width:12%;}
<table>
<col class="itemsDesc" />
<colgroup span="4" class="itemsDims" />
<thead>
<th>Ht</th>
<th>Wi</th>
<th>Dp</th>
<th>Pr</th>
<tbody>
<td>34in</td>
<td>45in</td>
<td>44in</td>
<td>$149</td>
<tr>
<td>42in</td>
<td>19.5in</td>
<td>87in</td>
<td>$299</td>
<tr>
<td>76in</td>
<td>33in</td>
<td>29.5in</td>
<td>$98</td>
<table>
<col class="itemsDesc" />
<colgroup span="4" class="itemsDims" />
<thead>
<th>Ht</th>
<th>Wi</th>
<th>Dp</th>
<th>Pr</th>
<tbody>
<td>27in</td>
<td>34in</td>
<td>45in</td>
<td>Apply now</td>
<tr>
<td>25in</td>
<td>39in</td>
<td>41in</td>
<td>$99-$149</td>
Buy sections of this site as downloadable PDF ebooks now
<thead>
<th>Ht</th>
<th>Wi</th>
<th>Dp</th>
<th>Pr</th>
</thead>
<tbody>
<td>34in</td>
<td>45in</td>
<td>44in</td>
<td>$149</td>
<tr>
<td>42in</td>
<td>19.5in</td>
<td>87in</td>
<td>$299</td>
<tr>
<td>76in</td>
<td>33in</td>
<td>29.5in</td>
<td>$98</td>
<table style="width:45em;">
<thead>
<th>Ht</th>
<th>Wi</th>
<th>Dp</th>
<th>Pr</th>
<tbody>
<td>27in</td>
<td>34in</td>
<td>45in</td>
<td>Apply now</td>
<tr>
<td>25in</td>
<td>39in</td>
<td>41in</td>
<td>$99-$149</td>