colgroup

The colgroup element defines a group of columns within a table, allowing you to apply styles or attributes to entire columns without repeating them on each cell.

Description

The <colgroup> element groups one or more columns in a table for styling or structural purposes. It must appear after the <caption> (if present) and before <thead>, <tbody>, or <tfoot> elements.

While CSS has limited support for column styling, <colgroup> remains useful for setting column widths and applying background colors.

When to Use

  • Column widths: Set fixed or proportional widths for specific columns
  • Column backgrounds: Apply background colors to entire columns
  • Semantic grouping: Group related columns together for clarity
  • Accessibility: Help assistive technologies understand column relationships

When Not Needed

  • Simple tables: Tables where all columns have equal treatment
  • Cell-level styling: When styles need to vary within a column

Basic Example

Use span to define how many columns the group covers, or include <col> elements for individual column control.

Using span Attribute

Product Comparison
Feature Basic Pro Enterprise
Storage 10 GB 100 GB Unlimited
Users 1 5 Unlimited
Support Email Priority 24/7 Phone
<table> <caption>Product Comparison</caption> <colgroup span="1"></colgroup> <colgroup span="3" style="background: oklch(95% 0.02 200);"></colgroup> <thead> <!-- Table headers --> </thead> <tbody> <!-- Table data --> </tbody> </table>

Using col Elements

Sales by Region
Region Q1 Q2 Total
North $45,000 $52,000 $97,000
South $38,000 $41,000 $79,000
<table> <caption>Sales by Region</caption> <colgroup> <col style="width: 30%;" /> <col style="width: 25%;" /> <col style="width: 25%;" /> <col style="width: 20%;" /> </colgroup> <thead> <!-- Table headers --> </thead> <tbody> <!-- Table data --> </tbody> </table>

Multiple Column Groups

Use multiple <colgroup> elements to create logical groupings of columns.

Annual Budget Overview
Category Planned Actual Budget Remaining
Marketing $50,000 $48,500 $55,000 $6,500
Development $120,000 $118,000 $125,000 $7,000
Operations $80,000 $82,500 $85,000 $2,500

CSS Limitations

Only certain CSS properties can be applied to <colgroup> and <col> elements:

Property Supported Notes
background Yes Background color and images
width Yes Column width
border Partial Only when border-collapse: collapse
visibility Yes Only collapse value
padding No Apply to th/td instead
text-align No Apply to th/td instead

For properties not supported on column groups, use CSS selectors targeting cells:

/* Target cells in a specific column */ td:nth-child(2), th:nth-child(2) { text-align: end; }

Accessibility

  • Column relationships: Helps assistive technologies understand column groupings
  • Visual distinction: Background colors can help users track columns, but ensure sufficient contrast
  • Not a replacement: <colgroup> does not replace the need for proper <th> headers with scope attributes

Attributes

Attribute Value Description
span Positive integer Number of columns the group spans. Cannot be used if <col> children are present.

Related Elements

  • <table> - Parent container
  • <col> - Individual column within a colgroup
  • <caption> - Must appear before colgroup
  • <thead> - Appears after colgroup