Tables for data

Tables express data relationships

Use a table when a reader needs to compare values across rows and columns. Do not use a table to arrange the overall page.

<table>
  <caption>
    Workshop times
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML basics</th>
      <td>9:00 a.m.</td>
    </tr>
  </tbody>
</table>

The caption names the dataset. Header cells and their scope make the relationships explicit when the visual grid is not available.

Responsive behavior

First remove unnecessary columns or rephrase dense content. When horizontal space still cannot fit genuine tabular data, place the table in a labeled scroll container rather than clipping it.

Exercise

Create a comparison of three plans with two measurable features. Read each cell aloud with its row and column header.