The HTML <colgroup> tag
Quick answer
The HTML <colgroup> element defines a group of columns in a <table> for shared styling. It contains <col> elements, or uses its own span attribute.
Overview
The <colgroup> element wraps the <col> definitions for a table. It must appear right after any <caption> and before the table's rows.
You can use its own span attribute to cover several columns as a single group, or nest individual <col> elements inside it for per-column control. It is the structural home for column-level styling, which the same limited set of column-applicable CSS properties applies to.
Syntax
<colgroup span="2" style="background:#eef;"></colgroup>Attributes
The <colgroup> element supports the following attributes, in addition to the global attributes available to every HTML element.
| Attribute | Value | Description |
|---|---|---|
span |
A positive integer (default 1). | Spans a col/colgroup across columns. |
Example
<table border="1">
<colgroup><col span="1" style="background:#fef9c3;"><col></colgroup>
<tr><td>Highlighted</td><td>Plain</td></tr>
</table>Best practices
Frequently asked questions
What is the colgroup element?
It groups one or more table columns, holding the <col> definitions for column-level styling.
Where does colgroup go in a table?
Right after any <caption> and before the table rows.
How do I group table columns?
What is the difference between the colgroup span and nested col elements?
A
span on the colgroup covers several columns uniformly; nested <col> elements let you style each column separately.