HTML table spans: merge cells only when the data relationship requires it

Use it for a real task

A receipt summary reports two measures under one quarter heading. The heading spans both measure columns, while each data row still has its own row header. That is a meaningful merge. If a designer wants a wider cell solely to position text, CSS should handle it outside the data model. Small tables with clear scope are easier to audit than intricate spans.

<table>
  <caption>Quarter 47 review count</caption>
  <thead>
    <tr><th scope="col" rowspan="2">Batch</th><th scope="colgroup" colspan="2">Quarter 47</th></tr>
    <tr><th scope="col">Approved</th><th scope="col">Held</th></tr>
  </thead>
  <tbody><tr><th scope="row">R-47</th><td>73</td><td>4</td></tr></tbody>
</table>

What the markup guarantees

The group heading applies to the two measure columns. Test the interpreted header associations with assistive technology for a production report; if the grid becomes harder to explain than the values, split it.

Cost and limits

Merged cells add no network requests but make column accounting harder for editors and parsers. The number of rendered cells remains proportional to the dataset, so pagination still matters for large reports.

Common Mistakes

• Do not allow spans to overlap other cells.
• Do not assume a visual merge names every data cell correctly.
• Keep the row and column counts consistent after edits.

Connected lessons

• HTML data tables: name row and column relationships explicitly
• HTML complex tables: connect each value to all applicable headers
• HTML data table versus layout container: preserve relationships, not columns