How to build a table

Use tables for data

Tables express relationships across rows and columns. Do not use them to arrange an entire page.

<table>
  <caption>Workshop schedule</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>HTML</td></tr>
    <tr><th scope="row">Tuesday</th><td>CSS</td></tr>
  </tbody>
</table>

Build the structure

• table wraps the data
• caption names its purpose
• tr creates a row
• th is a header and td is a data cell
• thead, tbody, and tfoot group rows

Associate headers

Use scope="col" and scope="row" in straightforward tables. Complex multi-level tables may require id and headers, but simplifying the table is often better.

Design responsively

Keep tables focused, avoid merged cells when possible, and allow horizontal scrolling on narrow screens without clipping content. Never replace accessible table markup with a screenshot.