HTML data tables: name row and column relationships explicitly

Use it for a real task

A receipt summary compares two regions across amount and state. A caption gives the table a name; scope on th cells keeps simple row and column associations clear. The table is for relationships in the data, not for positioning the surrounding page.

<table>
  <caption>Receipt review queue</caption>
  <thead><tr><th scope="col">Region</th><th scope="col">Amount</th><th scope="col">State</th></tr></thead>
  <tbody>
    <tr><th scope="row">North</th><td>47 credits</td><td>Pending</td></tr>
    <tr><th scope="row">South</th><td>26 credits</td><td>Approved</td></tr>
  </tbody>
</table>

What the markup guarantees

A complex table with multi-level headers needs more explicit associations than this simple grid. At narrow widths, permit horizontal scrolling or redesign the data presentation while preserving header relationships.

Cost and limits

Rendering a large table creates many DOM nodes. Paginate or summarize large datasets; hiding columns with CSS can also hide important relationships.

Common Mistakes

• Do not use a table for page layout.
• Use th for headers rather than bold td text.
• A caption identifies the table; it does not replace row and column headers.

Connected lessons

• HTML lists: choose ordered, unordered, or term-description structure
• HTML data table versus layout container: preserve relationships, not columns
• HTML figure and figcaption: keep an asset with its explanation

Related: HTML lists: choose ordered, unordered, or term-description structure.

Related: HTML figure and figcaption: keep an asset with its explanation.

Related: HTML data table versus layout container: preserve relationships, not columns.

Related: HTML receipt index project: landmarks, links, tables, and a bounded image.

Related: HTML complex tables: connect each value to all applicable headers.

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

Related: HTML canvas: draw a chart without hiding its underlying data.

Related: HTML colgroup: assign column structure without replacing headers.

Related: HTML table caption and summary: explain a dense data grid.

Apply this in HTML incident evidence project: keep a record readable when video fails.

Style this pattern

• CSS data tables: preserve headers when columns get narrow
• CSS audit table project: responsive records without dropped columns

Further CSS decisions

• CSS cursor: match the pointer cue to a real action

Rendering decisions

• CSS font-variant-numeric: keep changing values aligned