HTML <colgroup> Element

The <colgroup> element groups one or more columns within an HTML table. It can contain <col> elements that represent individual columns or groups of columns, making it possible to apply certain styles and column properties without repeating them on every table cell.

Syntax

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
</table>

The <colgroup> element uses both an opening and closing tag. When it contains <col> elements, those elements determine which columns are represented by the group.

Attributes

The <colgroup> element supports the global HTML attributes and the following element-specific attribute:

Attribute	Description
`span`	Specifies the number of consecutive table columns represented by the column group.

The span attribute must contain a positive integer greater than zero. It is used when the <colgroup> element does not contain any <col> elements.

Example

The following example uses <colgroup> and <col> elements to apply different background colors to columns in a table:

Play in Editor

Usage Notes

The <colgroup> element belongs inside a <table> element and appears after any <caption> element but before table sections such as <thead>, <tbody>, <tfoot>, or table rows.

A <colgroup> can contain one or more <col> elements when individual columns or sets of columns need different properties.

The span attribute provides another way to specify how many consecutive columns belong to the group. A <colgroup> that uses the span attribute must not contain <col> elements.

CSS support for table column groups is limited compared with styling individual table cells. Not every CSS property applied to a <colgroup> will affect the cells in the columns it represents.

Accessibility

The <colgroup> element organizes table columns but does not identify column headings or establish relationships between headers and data cells.

Use appropriate <th> elements and a clear table structure to identify headers. Do not rely only on colors or other visual styling applied through column groups to communicate important information.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <colgroup> Element .

Support for individual CSS properties applied to table column groups may vary.

<col> - Represents one or more columns within a table column group.

<table> - Represents tabular data arranged in rows and columns.

<th> - Defines a header cell within a table.

<td> - Defines a data cell within a table.

Specifications

HTML Living Standard: The <colgroup> Element

HTML <colgroup> Element