Table Headers, Spanning, and Captions

A well-structured table uses more than just <tr> and <td> — it labels its columns, groups its sections, and describes itself.

<table>
  <caption>Student Scores — Term 1</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rahim</td>
      <td>Math</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Karim</td>
      <td>Science</td>
      <td>92</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>88.5</td>
    </tr>
  </tfoot>
</table>

• <caption> — a title for the whole table, announced by screen readers before the data.
• <thead> / <tbody> / <tfoot> — group the header row, main data, and summary row respectively. This isn't just organizational — browsers can style these sections independently, and long tables can scroll their body while keeping the header fixed.
• <th> (table header) replaces <td> for header cells, and is bold/centered by default. It also carries semantic meaning: screen readers announce which header a data cell belongs to when navigating.
• colspan and rowspan merge cells across columns or rows: <td colspan="2"> makes one cell span two columns wide.

Always use <th> for header cells rather than styling a <td> to merely look bold — accessibility tools rely on the actual tag, not the visual appearance.