Build a table

Use tables for data with relationships across rows and columns, not for page layout.

Here is a small route comparison table:

<table>
  <tr>
    <th>Route</th>
    <th>Distance</th>
    <th>Difficulty</th>
  </tr>
  <tr>
    <td>Harbor loop</td>
    <td>8 km</td>
    <td>Easy</td>
  </tr>
  <tr>
    <td>Forest trail</td>
    <td>21 km</td>
    <td>Hard</td>
  </tr>
</table>

In the browser you see a grid with a header row and two data rows. The header cells usually appear bold by default, but that is browser styling, not why we use th.

table wraps the whole table. tr creates a row. Each row holds cells:

• th is a header cell: it labels a row or column
• td is a data cell

Use th because the cell labels other cells, not because you want bold text. CSS handles appearance. HTML carries meaning.

Do not use tables to arrange a page into columns. That was common in the early Web, but it mixes presentation with data structure and creates a confusing reading order for screen readers. CSS Grid and Flexbox exist for layout now.

Tables get awkward on narrow screens. Keep the data focused and use CSS to handle overflow on small viewports. Do not delete meaningful columns just to avoid horizontal scrolling. Fix the presentation instead.

A common mistake is using <td> for the top row because bold styling “looks enough like a header.” Screen readers then treat the first row as data, not labels. Swap those cells to th and the table makes sense to everyone.

When you add a learning progress table to your my-page project, mark the header row with th. Tab through the table with the keyboard and confirm each header is announced with its column.

If the table looks like a spreadsheet but reads like a pile of cells, the header row is the first thing to fix.

Quick check

Start quiz

Result

You got of right.

Try again