HTML Tables
A table expresses relationships between rows and columns. Use it for data that readers need to compare, such as opening times or workshop availability, rather than for laying out a whole page.
How it works
- Place a caption inside table to identify what the data describes. Use tr for rows, th for headers, and td for data cells.
- thead, tbody, and tfoot organise row groups. Simple explicit groups also make styling and later updates easier.
- For a small table, scope="col" on column headings and scope="row" on row headings help describe header relationships.
A practical example
<table>
<caption>Workshop places</caption>
<thead><tr><th scope="col">Session</th><th scope="col">Places</th></tr></thead>
<tbody>
<tr><th scope="row">Bike repair</th><td>8</td></tr>
<tr><th scope="row">Tool care</th><td>6</td></tr>
</tbody>
</table>
Each number has a session label and a column heading. The caption states what the table measures rather than leaving the reader to infer its purpose.