Inspect the working example
This synthetic measurement table uses KB for all values. Page and Styles identify rows; Source and Output identify columns. To read the value 6, follow both its row and its column rather than treating it as an isolated number.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Page / Output | Follow Page row and Output column | 6 KB |
| Styles / Source | Follow Styles row and Source column | 2 KB |
| Header structure | Inspect th elements and scope | Three column headers and two row headers |
Follow the browser mechanism
Use th for header cells and scope="col" or scope="row" for their direction in this simple table. caption supplies the table topic and unit. A bold td remains a data cell, and a caption does not replace the individual headers. More complex multi-level tables need their own association design.
A styled td is still a data cell
This alternative changes only the visible weight of Page. The row label is now a td without header semantics.
<table><caption>File sizes in KB</caption><tr><td style="font-weight:bold">Page</td><td>4</td><td>6</td></tr></table>The alternative contains no th elements or row headers. In the working table, Page is a th with scope="row".
Try the repair
A third row “Images” contains Source 12 and Output 9. Which cell should identify the row, and what is the Output value with its unit?
Show the worked answer
Use <th scope="row">Images</th> for the row label. Its Output data cell is 9 KB, with the unit supplied by this table caption.
- Keep scoped headers and the caption when changing table styling.
- Read the final column at a 320px frame width without clipping.