Syntax
<table>
<colgroup>
<col style="background: #f3f4f6;">
<col span="2">
</colgroup>
<!-- table rows -->
</table>Examples
Styling a Single Column
Highlighting one column across every row.
<table>
<colgroup>
<col style="background: #fef3c7;">
<col>
<col>
</colgroup>
<tr><th>Name</th><th>Role</th><th>Status</th></tr>
<tr><td>Alice</td><td>Dev</td><td>Active</td></tr>
</table>Spanning Multiple Columns
Using the span attribute to apply a style across several columns at once.
<table>
<colgroup>
<col span="2" style="background: #e0f2fe;">
<col>
</colgroup>
<tr><th>Q1</th><th>Q2</th><th>Q3</th></tr>
</table>Attributes
- span (number): The number of columns the col/colgroup applies to
Best practices
- Use colgroup/col only for column-level styling like width or background, not for content
- Place colgroup immediately after the opening table tag, before thead/tbody
- For most styling needs, targeting cells directly with CSS (nth-child) is more flexible than col
- col elements are void (self-closing) and take no content
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<col>
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
By 4 (possibly earlier) - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
By 3.2 (possibly earlier) - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- By 4 (possibly earlier)
Edge
- From 12
Opera
- From 15
Safari on iOS
- By 3.2 (possibly earlier)
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<colgroup>
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
By 4 (possibly earlier) - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
By 3.2 (possibly earlier) - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- By 4 (possibly earlier)
Edge
- From 12
Opera
- From 15
Safari on iOS
- By 3.2 (possibly earlier)
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<col> span
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
By 4 (possibly earlier) - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
By 3.2 (possibly earlier) - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- By 4 (possibly earlier)
Edge
- From 12
Opera
- From 15
Safari on iOS
- By 3.2 (possibly earlier)
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<colgroup> span
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
By 4 (possibly earlier) - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
By 3.2 (possibly earlier) - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- By 4 (possibly earlier)
Edge
- From 12
Opera
- From 15
Safari on iOS
- By 3.2 (possibly earlier)
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.