<colgroup>: The COLGROUP Element
Last updated: 2026-10-13
<colgroup>The COLGROUP Element
A container grouping table columns, wrapping col elements to define column styles in bulk.
| Category | Tables |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </colgroup> tag |
| Status | Standard |
📝 Syntax
<colgroup>
<col>
</colgroup>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
span | Columns covered when no col children are present. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <colgroup> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： When col children exist, colgroup's span is ignored; place it after caption, before thead.
❓ FAQ
QIs colgroup required?
ANo —
<col> may sit directly under table, but the spec recommends wrapping in <colgroup> for structure and validator friendliness. When styling column groups (one background for the first columns, another for the rest), colgroup is the proper way.QWhere does colgroup go inside table?
ARight after
<caption> and before any row content (thead/tbody/tr): <table><caption>…</caption><colgroup>…</colgroup><thead>…</thead></table>. Out-of-order placement gets corrected by the parser or flagged by validators — write it correctly yourself.QWhich wins when col width conflicts with th width?
AColumn-level settings (col/colgroup width) apply to the whole column and generally take precedence, though overly wide cell content can still force the column wider. Best practice: define column widths in one place (usually colgroup) and never mix.
🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
