In the last chapter, the first row ("Name", "Position", "Club") looked exactly like every other row. But it's actually special: a header row that describes what's in the columns below it. There's a dedicated element for that.

<th> instead of <td> for header cells

<th> ("table header") works exactly like <td>, but marks the cell as the heading for its column (or row). Browsers display <th> cells bold and centred by default:

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Finn</td>
    <td>Striker</td>
  </tr>
</table>

Just like with the h1-h6 heading elements, this isn't purely a visual trick: <th> tells screen readers "this is the header for this column", which helps blind users understand which column a given cell belongs to when the table is read aloud.

thead and tbody: optional, but recommended

To make it even clearer which part of the table is the header and which is the actual content, you can wrap <thead> ("table head") around the header row and <tbody> ("table body") around the data rows:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Finn</td>
      <td>Striker</td>
    </tr>
  </tbody>
</table>

caption: the headline of the whole table

<caption> gives the entire table a title - comparable to <figcaption> for images. <caption> goes right after the opening <table> tag, before <thead>:

<table>
  <caption>My Favourite Players</caption>
  <thead>
    ...
  </thead>
  ...
</table>

The complete, clean table

Let's build Finn's player table properly with everything we've learned:

<h2>My Favourite Players</h2>
<table>
  <caption>Player, position, and club</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Club</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Player A</td>
      <td>Striker</td>
      <td>Club A</td>
    </tr>
    <tr>
      <td>Player B</td>
      <td>Goalkeeper</td>
      <td>Club B</td>
    </tr>
  </tbody>
</table>