`<colgroup>` Column group

Q: What can I style with colgroup and col?

Very little. Columns accept background , border (with border-collapse:collapse ), width and visibility:collapse . Text color, padding and alignment have no effect, because cells are not children of columns. For those, target the cells themselves, for example with td:nth-child(2) .

Q: Where does colgroup go in a table?

After the optional <caption> , ahead of <thead> , <tbody> , <tfoot> or any rows. Each <colgroup> has either a span attribute or <col> children. Never both. A table can have several colgroups for different column groups, say one for labels and one for quarterly figures.

Groups table columns so you can style them as one.

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

<colgroup> groups one or more columns of a table. Place it after the caption and before any rows. Give it a span, or put <col> elements inside it.

Columns accept very few CSS properties: background, border, width and visibility. That is enough to shade or size whole columns without putting a class on every cell.

The span attribute and the col children are explained under the colgroup element in the WHATWG standard (opens in a new tab). Single columns use the col element.

Syntax

<table>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

When to use it

Some tables have columns that belong together or share a width or background. You might highlight the recommended plan in a comparison, shade the weekend in a weekly schedule or pin the width of a narrow ID column. <colgroup> handles all of these.

When only a cell or two needs styling, put a class on those cells. Columns don't accept text properties such as color, alignment or bold, so style those with selectors like td:nth-child(2).

That selector has a weak spot. A cell with colspan or rowspan changes the child number of the cells after it, and nth-child styling lands on the wrong column. col styling follows the real grid. In tables with merged cells, colgroup is the safer way to set widths and backgrounds. Each colgroup also defines the group that a th scope="colgroup" header refers to.

Attributes

Attribute	What it does
`span`	Number of columns in the group (when it has no col children).

Live example

Edit the code and watch the preview.

<table>
  <colgroup>
    <col>
    <col span="2" style="background:#ffd">
  </colgroup>
  <tr>
    <th>Day</th>
    <th>Morning</th>
    <th>Evening</th>
  </tr>
  <tr>
    <td>Mon</td>
    <td>Run</td>
    <td>Read</td>
  </tr>
</table>

More examples

Highlighting the recommended plan

One class on the third col shades the whole Pro column, and no cell needs a class of its own. The column supplies the background only. Text styles stay on the cells.

<style>
.pick{background:#eef7ee}
</style>
<table>
  <colgroup>
    <col>
    <col>
    <col class="pick">
  </colgroup>
  <tr>
    <th scope="col">Feature</th>
    <th scope="col">Basic</th>
    <th scope="col">Pro (recommended)</th>
  </tr>
  <tr>
    <th scope="row">Users</th>
    <td>1</td>
    <td>10</td>
  </tr>
  <tr>
    <th scope="row">Support</th>
    <td>Email</td>
    <td>Phone and email</td>
  </tr>
</table>

Morning and afternoon groups

The timetable has three colgroups: the day column, a morning group and an afternoon group. The headers on top carry scope="colgroup", which makes each one apply to both columns in its group.

<style>
.am{background:#fff8dc}
.pm{background:#e8f0ff}
</style>
<table>
  <colgroup span="1"></colgroup>
  <colgroup span="2" class="am"></colgroup>
  <colgroup span="2" class="pm"></colgroup>
  <tr>
    <td></td>
    <th scope="colgroup" colspan="2">Morning</th>
    <th scope="colgroup" colspan="2">Afternoon</th>
  </tr>
  <tr>
    <th scope="col">Day</th>
    <th scope="col">9:00</th>
    <th scope="col">11:00</th>
    <th scope="col">14:00</th>
    <th scope="col">16:00</th>
  </tr>
  <tr>
    <th scope="row">Mon</th>
    <td>Math</td>
    <td>Art</td>
    <td>Music</td>
    <td>Sport</td>
  </tr>
</table>

Tip: colgroup comes right after the caption and ahead of all rows.

Browser support

All browsers support colgroup and col. Their old width, align and valign attributes are obsolete, and CSS does that work now. visibility:collapse for hiding a column has a history of behaving differently from browser to browser. Test it before you depend on it.

Accessibility

If a header spans a group of columns, give its th scope="colgroup" so screen readers tie it to the right columns. The W3C tutorial on tables with irregular headers (opens in a new tab) has scope="colgroup" in a working example.

Common mistakes

Wrong

<colgroup span="2">
  <col>
</colgroup>

Right

<colgroup>
  <col span="2">
</colgroup>

Once a colgroup has col children, it cannot also take span.

Frequently asked questions

What can I style with colgroup and col?

Very little. Columns accept background, border (with border-collapse:collapse), width and visibility:collapse. Text color, padding and alignment have no effect, because cells are not children of columns. For those, target the cells themselves, for example with td:nth-child(2).

Where does colgroup go in a table?

After the optional <caption>, ahead of <thead>, <tbody>, <tfoot> or any rows. Each <colgroup> has either a span attribute or <col> children. Never both. A table can have several colgroups for different column groups, say one for labels and one for quarterly figures.

Related tables elements

<table>Tabular data laid out in rows and columns.<caption>A table's title, written as the table's first child.<col>Stands for one or more columns in a colgroup, for styling.<thead>Wraps the header row or rows of a table.<tbody>Wraps the main rows of data in a table.<tfoot>Holds summary rows such as totals at the foot of a table.<tr>A single table row of cells.<th>Header cell for a column or row, shown bold and centered by default.<td>A normal data cell inside a table row.

<colgroup> Column group