HTML Table Colgroup

Styling a whole table column normally means applying the same rule to every single cell in that column across every row, which is repetitive. <colgroup> and <col> let you style or size an entire column just once, from a single place near the top of the table, without touching the individual row markup at all.

In this page:

Grouping Columns with colgroup
Sizing a Column with the col Element
Spanning Multiple Columns with span
Highlighting a Column Visually
When to Use colgroup vs Per-Cell Styling

Grouping Columns with colgroup

<colgroup> is a structural wrapper placed immediately after the opening <table> tag, before any rows, that contains one <col> element for every column you want to individually reference or style, without needing to touch a single row's markup.

Note: Place colgroup as the very first child of table, before thead or tbody, or browsers will ignore it.

Warning: colgroup appearing after any row content in the markup is invalid and will simply be ignored by the browser.

Example: Grouping Columns with colgroup

markup

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

Sizing a Column with the col Element

Setting a width on an individual <col> element sizes that entire column in one place, instead of setting the same width on every single cell down that column across every row -- a much more maintainable approach for wide tables.

Note: Use col width settings for consistent column sizing that stays correct even as rows are added or removed later.

Warning: Only a limited set of CSS properties, primarily width, is reliably supported directly on col across all browsers.

Example: Sizing a Column with the col Element

markup

<table>
  <colgroup>
    <col style="width: 70%;">
    <col style="width: 30%;">
  </colgroup>
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
</table>

Spanning Multiple Columns with span

The span attribute on a single <col> element lets it represent several consecutive columns at once, instead of writing out one <col> per column -- span="3" on one col element is equivalent to writing three plain col elements in a row.

Note: Use span to shorten colgroup markup when several consecutive columns share the exact same width or styling.

Warning: A col span value that does not match the table's actual column count will misalign column-specific styling.

Example: Spanning Multiple Columns with span

markup

<table>
  <colgroup>
    <col span="3" style="width: 33%;">
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Highlighting a Column Visually

Beyond width, a col element can be targeted with CSS to apply a background color to an entire column at once, which is useful for visually highlighting a single important column, like a "Total" column, without adding a class to every individual cell in it.

Note: Highlight one key column (like a total or status column) via colgroup instead of manually classing every cell in that column.

Warning: Background-color support through col is more limited and inconsistent across browsers than width support, so always visually verify it renders as expected.

Example: Highlighting a Column Visually

markup

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow;">
  </colgroup>
  <tr>
    <td>Item</td>
    <td>Total</td>
  </tr>
</table>

When to Use colgroup vs Per-Cell Styling

colgroup is best reserved for column-wide sizing and simple background highlighting; for more complex per-column styling (like text-align, borders, or font styling), the more broadly-supported CSS :nth-child(n) selector applied to td and th cells is generally the more reliable choice.

Note: Reach for colgroup specifically for width and simple highlighting; use :nth-child selectors on cells for anything more visually complex.

Warning: Relying on colgroup for properties beyond width and background can produce inconsistent rendering across different browsers.

Example: When to Use colgroup vs Per-Cell Styling

markup

<table>
  <colgroup>
    <col style="width: 50%;">
  </colgroup>
  <tr>
    <td style="text-align: right;">Complex per-cell style</td>
    <td>Simple width</td>
  </tr>
</table>

Common Mistakes

Assuming col elements can hold visible content, when they are purely structural and cannot contain text or other elements.
Forgetting that colgroup must appear immediately after the opening table tag, before any thead, tbody, or tr elements.
Trying to set every CSS property on col, when browsers only apply a limited set of properties (mainly width and visibility/background in some browsers) through col.

Chapter Summary

<colgroup> groups one or more <col> elements, each representing an entire table column.
The span attribute on <col> lets one col element apply to multiple consecutive columns at once.
colgroup must be placed directly after the opening table tag, before any row content.

Browser Support

<colgroup> and <col> are supported in every browser and have been part of HTML since HTML4; only a limited set of CSS properties like width are reliably supported through them.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Styling Next Lesson → HTML Lists

HTML Table Colgroup

Grouping Columns with colgroup

Sizing a Column with the col Element

Spanning Multiple Columns with span

Highlighting a Column Visually

When to Use colgroup vs Per-Cell Styling

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code