Build a table

Tables are for data with relationships across rows and columns.

<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>

table contains the table. tr creates a row. Each row contains cells:

• th is a header cell
• td is a data cell

Use th because the cell labels other cells, not because you want bold text.

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. CSS Grid and Flexbox are made for layout.

Tables can become difficult to use on narrow screens. Keep the data focused and use CSS to handle overflow, but do not remove meaningful columns just to make the table fit.

Quick check

Result

You got of right.

Try again