colgroup

The HTML <colgroup> element groups one or more columns in a table. It is mainly used with col to describe column-level presentation settings.

Basic syntax

<table>
  <colgroup>
    <col class="label-column">
    <col span="2" class="value-columns">
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Put colgroup inside table, before the row groups. It contains col elements or can represent a consecutive range with span.

Grouping columns with span

<colgroup span="3" class="numeric-columns"></colgroup>

When span is used on colgroup, it represents that many consecutive columns. A group with child col elements describes the columns through those children instead.

colgroup is not a header

colgroup groups columns for structure or presentation; it does not give them a visible name and does not replace th. Use table headers and their associations to communicate meaning to users and assistive technology.

For responsive behavior, prefer clear HTML structure and CSS. Do not rely on a column group as a layout system for unrelated page content.

Common mistakes

• Putting colgroup after thead or tbody.
• Using span and child col elements in a way that counts the same columns twice.
• Expecting it to create a column label or accessibility relationship.
• Assuming every CSS property applies to every cell through a column group.

Related pages

• col: apply settings to table columns
• caption: describe a table
• table: mark up tabular data
• HTML reference index