colgroup Description:
The colgroup tag creates and defines an explicit column group in an HTML table. This provides web designers a way to style the table cells in that column while leaving other cells in a row alone.
colgroup Web Browser Support:
- Chrome 1, 2, 3, 4, 5, 6, 7, 8, 9
- Firefox 1, 2, 3
- Internet Explorer 4, 5, 6, 7, 8
- Netscape 6, 7, 8
- Opera 6, 7, 8, 9, 10, 11
- Safari 1, 2, 3, 4, 5
HTML Versions
colgroup Attributes:
colgroup End Tag:
The end tag </colgroup> is optional in HTML 4 and HTML5. It is required in XHTML.
colgroup Contents:
column contents. The following tag is valid within the colgroup tag:
col
colgroup Valid Context:
The colgroup tag is valid within the following tag:
table
colgroup Example:
Simple table with the first column listed as a column group
<table>
<colgroup>
<col>
</colgroup>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
</tr>
</table>
See more examples of the colgroup tag in action: Colgroup Examples
colgroup Special Notes:
- Start from the left-most column when you are assigning column groups. To assign styles to an interior column, attach the columns to the left in one colgroup, and then the styled column in a second.
- The function of this tag is to provide more control over the look and feel of the individual columns in a table.
- It is primarily used as a hook for CSS styles on your table.
- Make sure you test pages using this tag extensively. I have experienced difficulty getting all CSS styles to attach correctly to colgroup columns.
