Tables for real data

01Use a table for relationships

Tables work well when rows and columns describe related information. Do not use them to position the page header, sidebar or footer.

<table>
  <caption>Material comparison</caption>
  <tr><th scope="col">Material</th><th scope="col">Finish</th></tr>
  <tr><td>Oak</td><td>Natural</td></tr>
</table>

02Explain the headers

Use th for headers and td for data. Scope helps explain whether a header applies to a row or a column. A caption gives the table a useful name.

<tr>
  <th scope="row">Kitchen</th>
  <td>Made to measure</td>
</tr>

03Handle small screens

Wrap a wide table in a container that can scroll horizontally. Keep the table’s semantics instead of shrinking text until it becomes unreadable.

<div class="table-scroll">...</div>
<style>
.table-scroll { overflow-x: auto; }
th, td { padding: 12px; text-align: left; }
</style>

04Try it yourself

Add another row and keep the headers meaningful.

Further reading

Use the MDN learning guides and HTML Living Standard for deeper explanations and current browser guidance.