The <colgroup> Element
As defined in the HTML Living Standard, the <colgroup> element represents a group of one or more columns in the table that is its parent. It acts as a container for <col> elements.
| Category | Metric A | Metric B |
|---|---|---|
| Usability | 95% | 88% |
<table>
<colgroup>
<col style="width: 150px">
</colgroup>
<colgroup class="highlight-group">
<col span="2">
</colgroup>
...
</table>
View HTML Living Standard: The colgroup element
Usage Rules & Hierarchy
- Placement: The
<colgroup>element must appear inside a<table>, after any<caption>and before any<thead>,<tbody>,<tfoot>, or<tr>. - Children: It can contain zero or more
<col>elements. If it contains no<col>elements, it can use thespanattribute to define the number of columns it covers. - The
spanAttribute: Specifies the number of columns in the group. The default is 1. If child<col>elements are present, thespanattribute is ignored.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using <colgroup> helps define the structural "bone" of the table. While it doesn't provide direct feedback to screen readers like a header cell does, it allows browsers to pre-calculate table dimensions and relationships, leading to more robust rendering of the accessibility tree for complex data sets.
Styling Benefits
The primary utilitarian benefit of <colgroup> is applying styles to entire vertical sections of a table without having to repeat classes on every individual <td> or <th> cell.
- Efficiency: Apply a background color or width to a group of columns in one place.
- Consistency: Ensures that all columns in a semantic group share the same visual markers, which helps users with low vision or cognitive disabilities distinguish between data types.
A11y Tip: Meaningful Color
If you use <colgroup> to color-code sections of a table, ensure the color is not the only way to convey meaning, satisfying WCAG SC 1.4.1 (Use of Color). Always provide text-based labels in the header cells.