colgroup
Groups one or more columns in a table for structural and styling purposes. Supports the span attribute for multi-column groups or individual col elements for per-column control.
Description
The <colgroup> element groups one or more columns in a <table> for structural or styling purposes. It must appear after the <caption> (if present) and before any <thead>, <tbody>, or <tfoot> elements.
A <colgroup> can either use the span attribute to cover multiple columns as a single group, or contain individual <col> elements for per-column control. These two modes are mutually exclusive: if <col> children are present, the span attribute is ignored.
When to Use
- Column widths: set fixed or proportional widths for specific columns
- Column highlighting: apply background colors to draw attention to specific columns
- Semantic grouping: group related columns together (e.g., "H1 columns" vs "H2 columns" in a multi-header table)
When Not Needed
- Simple tables: where all columns have equal treatment and auto-sized widths
- Cell-level styling: when styles need to vary within a column, target cells directly with CSS
Examples
This demo shows a table with alternating column backgrounds applied via <col> elements inside a <colgroup>.
<table> <caption>Team Schedule</caption> <colgroup> <col /> <col style="background: oklch(from var(--color-interactive) l c h / 0.05);" /> <col /> <col style="background: oklch(from var(--color-interactive) l c h / 0.05);" /> </colgroup> <thead> <tr> <th scope="col">Name</th> <th scope="col">Monday</th> <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> </tr> </thead> <tbody> <tr> <td>Alice</td><td>9am-5pm</td><td>Remote</td><td>9am-5pm</td> </tr> <!-- More rows... --> </tbody></table>Using span
The span attribute applies properties to multiple consecutive columns without individual <col> elements.
<table> <colgroup span="1"></colgroup> <colgroup span="3" style="background: oklch(95% 0.02 200);"> </colgroup> <!-- Spans 3 columns with a tinted background --></table>Column Widths
Set proportional or fixed widths on <col> elements for consistent column sizing.
<table> <colgroup> <col style="width: 30%;" /> <col style="width: 25%;" /> <col style="width: 25%;" /> <col style="width: 20%;" /> </colgroup> <!-- Column widths are proportional --></table>CSS Limitations
The CSS specification only allows a limited set of properties on <colgroup> and <col> elements.
| Property | Supported | Notes |
|---|---|---|
background |
Yes | Background color and images |
width |
Yes | Column width (fixed or percentage) |
border |
Partial | Only with border-collapse: collapse (VB default) |
visibility |
Yes | Only the collapse value |
padding |
No | Apply to <th>/<td> instead |
text-align |
No | Use data-numeric or target cells with CSS |
For properties not supported on column groups, target cells with CSS selectors or use VB's data-numeric attribute for right-aligned columns.
/* Only these properties work on col/colgroup: *//* background, width, border (with collapse), visibility: collapse */ /* For text-align, padding, color, font — target cells instead: */td:nth-child(2),th:nth-child(2) { text-align: end;} /* Or use VB's data-numeric attribute: *//* th data-numericAmount</th> */Attributes
| Attribute | Value | Description |
|---|---|---|
span |
Positive integer | Number of columns the group spans. Cannot be used when <col> children are present. |
Accessibility
- Visual distinction: column background colors help users track data across rows, but ensure sufficient contrast
- Not a replacement for headers:
<colgroup>does not replace proper<th>headers withscopeattributes - Column relationships: helps assistive technologies understand column groupings in complex tables