HTML colgroup: assign column structure without replacing headers

Implementation choice

An equipment log has one identifying column and two measurement columns. Grouping them can support consistent styling across all rows, but the table's meaning still comes from its caption and header cells. Column groups do not tell a screen reader that 47 is a temperature or a pressure reading; header text and associations do that. Keep the grid simple enough to verify after a new measurement field is added.

<table>
  <caption>Depot west sensor readings</caption>
  <colgroup><col span="1"><col span="2"></colgroup>
  <thead><tr><th scope="col">Sensor</th><th scope="col">Temperature °C</th><th scope="col">Pressure kPa</th></tr></thead>
  <tbody><tr><th scope="row">SR-47</th><td>23</td><td>101</td></tr></tbody>
</table>

What remains outside the markup

The two groups describe one plus two columns. They are not a substitute for scope, caption, or row labels. Any CSS applied to col elements must also be checked in the browsers that display the report.

Cost and limits

Column metadata adds little DOM weight. Tables with thousands of rows still require pagination or a bounded dataset; colgroup does nothing to reduce row count or query cost.

Common Mistakes

• Do not use colgroup to imitate a page layout grid.
• Do not omit table headers because columns have groups.
• Do not let span counts drift from the actual columns.

Connected lessons

• HTML data tables: name row and column relationships explicitly
• HTML table spans: merge cells only when the data relationship requires it
• HTML complex tables: connect each value to all applicable headers