AI Summary: Clear HTML table semantics improve human and assistive-technology interpretation and give software explicit relationships to process. Use captions, real th and td cells, scope for simple headers, headers and id for complex associations, consistent units, and a prose explanation; these practices do not guarantee an LLM will parse, rank, or cite every table correctly.
Start with data semantics
W3C WAI recommends <th> for headers and <td> for data so software can determine each relationship. [1] WHATWG defines table as multidimensional data and warns that layout tables can confuse extraction tools. [2]
Explicit relationships are easier for people, screen readers, and software to inspect. This does not force a language model to retrieve or cite a table correctly.
Make relationships explicit
Give each table a concise <caption>. Use <th scope="row"> or <th scope="col"> for simple headers; complex tables may need scope, id, and headers. [1] MDN says headers contains IDs of the <th> elements describing a cell. [3]
Keep one concept per column, and units in the header or caption. Do not hide qualifiers in color, hover states, icons, or an image. Repeat important interpretation in nearby prose.
| Choice | Implementation | Benefit |
|---|---|---|
| Topic | Visible caption | Establishes scope |
| Simple headers | th plus scope | Declares row or column |
| Complex headers | id and headers | Links multi-level cells |
Separate data from presentation
A CSS grid may be right for layout, but it is not automatically a data table. WHATWG and W3C say to use CSS for layout instead. [1] [2] Preserve comparison and measurement relationships in HTML.
On mobile, use horizontal scrolling or a tested alternative without deleting labels, units, or row identity.
Validate the rendered result
Inspect the DOM after rendering. Confirm table associations survive MDX or CMS processing; test keyboard, screen reader, mobile, copy/paste, and extraction with row and column headers. Prefer scope when sufficient because complex associations leave room for errors. [3] [4]
A table is AI-ready when a person can state its subject, qualifying headers, units, and date. That is verifiable content quality, not a model promise.
References
- W3C WAI: Tables Tutorial
- WHATWG: The table element and tabular data
- MDN: HTML table accessibility
- MDN:
<th>HTML table header element