Grouped Column Headers Table — Two-Level colspan Header (HTML CSS JS)

Wide tables with many related columns — months under quarters, metrics under categories — read better when a top header row groups them, and a second row labels each individual column. This snippet builds that grouped header the correct way: real colspan and rowspan attributes on actual <th> elements, not a second absolutely-positioned bar drawn over a flat header. The result is a table that's both visually grouped and structurally correct for screen readers and copy-paste into a spreadsheet.

Two real header rows, not one faked row

The <thead> contains two <tr> elements. The first row has a "Region" corner cell with rowspan="2" (so it spans both header rows without repeating), then a "Q1" <th colspan="3"> and a "Q2" <th colspan="3">, each covering exactly three of the six data columns, plus an "H1 Total" corner with rowspan="2". The second row supplies the six individual month labels. Because the browser's own table layout engine resolves the colspans, the group headers stay perfectly aligned with their columns at any width or font size — a visual-only overlay would drift the moment content reflows.

Why rowspan matters for the corner cells

The "Region" and "H1 Total" headers logically belong to *both* header rows (a single column, but the header block is two rows tall), so they're written once with rowspan="2" rather than duplicated. This is the detail that trips people up when hand-building grouped headers: without rowspan, the corner cells either repeat awkwardly or the columns miscount, because the browser expects every row in a table to describe the same number of column slots once spans are accounted for.

Semantically correct, not just visually grouped

Because this uses genuine table markup, a screen reader announcing a cell can trace it back through its header row to both "Q1" and "Feb," and selecting the table and pasting into Excel or Sheets reproduces the same grouped structure. A CSS-only fake header (a positioned bar with no real <th> relationship to the columns below it) loses all of that — it looks right but conveys nothing structurally and breaks on copy-paste or with assistive technology.

Color-coded groups for fast scanning

Each quarter's header cells and its underlying data columns share a tint (indigo for Q1, green for Q2), so a reader's eye groups the six month columns into two chunks before reading a single number — useful once you have more than three or four related columns in a row.

Data-driven and generic

The body renders from a flat DATA array of region records; the MONTHS array drives which keys become columns and their total. Add a new quarter by adding a third grouped <th colspan="3"> and three more month keys — the rendering loop over MONTHS needs no other change. Pair this pattern with a pivot table when you need the grouping computed from raw records rather than pre-aggregated columns, or a sticky header table to keep a grouped header visible while scrolling a long report.