HTML <colgroup> Tag
The HTML <colgroup> tag groups one or more table columns so you can style them together, using nested <col> elements.
The HTML <colgroup> tag is used to specify a group of columns with common properties inside a table. The tag can only contain <col> elements, which define column properties.
The <colgroup> tag is nested inside a <table> tag, before <thead>, <tbody>, <tfoot> and <tr>, and after <caption>, if it is used (in the <caption> tag, the table caption is inserted).
A single HTML table can include several <colgroup> tags.
Why use <colgroup>?
Cells in an HTML table are written row by row, so there is no natural place to attach styling that should apply to a whole column. The <colgroup> and <col> elements solve this: they describe the table's columns once, up front, and let you apply shared properties (width, background, borders) to every cell in those columns at the same time.
Two practical benefits:
- Style many columns at once. Set a width or background on a column group and you do not have to repeat it on every
<td>in every row. - Separate structure from presentation. The column definitions live in one small block near the top of the table instead of being scattered across the cells, which keeps the markup easier to read and maintain.
Syntax
The <colgroup> tag comes in pairs. The content is written between the opening (<colgroup>) and closing (</colgroup>) tags.
Example of the HTML <colgroup> tag:
HTML <colgroup> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="width:20%; background-color:#eee;" />
<col style="width:10%; background-color:#8ebf42;" />
</colgroup>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>female</td>
<td>19</td>
</tr>
<tr>
<td>John Johnson</td>
<td>male</td>
<td>23</td>
</tr>
</table>
</body>
</html>Result
Understanding the span attribute
span controls how many consecutive columns an element covers, but it means slightly different things depending on where you put it:
spanon<colgroup>declares that the group itself spans that many columns. Use it when you want to treat several consecutive columns as one styled block and do not need separate<col>children. For example,<colgroup span="3">groups the first three columns.spanon a child<col>declares how many columns that one<col>applies to. This lets a single<colgroup>describe several columns with different rules, as in the example above where<col span="2">covers the first two columns and the next<col>covers the third.
If a <colgroup> contains <col> children, the children describe the columns and you should not also put span on the <colgroup>.
Using several <colgroup> elements
One table can contain more than one <colgroup>. Each group claims the next set of columns in order, which is handy for visually separating logical sections of a table:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
padding: 6px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color:#eee;" />
</colgroup>
<colgroup span="2" style="background-color:#cde6a5;"></colgroup>
<tr>
<th>Product</th>
<th>Q1 Sales</th>
<th>Q2 Sales</th>
</tr>
<tr>
<td>Widgets</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<td>Gadgets</td>
<td>90</td>
<td>110</td>
</tr>
</table>
</body>
</html>The first <colgroup> styles the leftmost column; the second, with span="2", styles the two sales columns as a single group.
Styling columns with CSS
The cleanest modern approach is to keep the markup minimal and move presentation into a stylesheet, targeting the <col> and <colgroup> elements with CSS instead of the deprecated align, valign, and width attributes. A limited but useful set of CSS properties apply through these elements: background-color, background, border, width, and visibility.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
padding: 6px;
}
.highlight {
background-color: #8ebf42;
}
col.narrow {
width: 80px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="narrow" />
<col class="highlight" />
</colgroup>
<tr>
<th>Code</th>
<th>Item</th>
</tr>
<tr>
<td>A1</td>
<td>Notebook</td>
</tr>
</table>
</body>
</html>A practical gotcha: a column's background-color shows through only where the cells themselves are transparent. If a <td> or <tr> sets its own background, that cell-level color wins over the column's.
Accessibility
<colgroup> and <col> are presentational only — they affect appearance but carry no semantic meaning for assistive technologies. Screen readers do not announce column groups, and using them does not associate headers with data cells. To make a table accessible, use real header cells (<th>) with appropriate scope attributes; do not rely on <colgroup> to convey structure.
Attributes
Note: Presentation attributes like align, valign, and width are deprecated in HTML5. Style columns with CSS (text-align, vertical-align, width) targeting the <col> and <colgroup> elements instead.
| Attribute | Value | Description |
|---|---|---|
align | left | right | center | justify | char | Sets the alignment of the column contents. Not supported in HTML5. |
char | character | Aligns the contents of the column with the specified character. Used only if align="char". Not supported in HTML5. |
charoff | number | Shifts the contents of the cell relative to the specified character. Used only if align="char". Not supported in HTML5. |
span | number | Sets the number of columns the <col> element applies to. Default is 1. |
valign | top | middle | bottom | baseline | Aligns the content vertically. Not supported in HTML5. |
width | % | pixels | relative_length | Sets the width of the column. Not supported in HTML5. |
The <colgroup> tag also supports the Global Attributes and the Event Attributes.