Im letzten Kapitel hat die erste Zeile ("Name", "Position", "Verein") genauso ausgesehen wie alle anderen Zeilen. Dabei ist sie eigentlich etwas Besonderes: eine Kopfzeile, die beschreibt, was in den Spalten darunter steht. Dafür gibt es ein eigenes Element.

<th> statt <td> für Kopfzellen

<th> ("table header") funktioniert genau wie <td>, markiert die Zelle aber als Überschrift ihrer Spalte (oder Zeile). Browser zeigen <th>-Zellen standardmäßig fett und zentriert an:

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Finn</td>
    <td>Stürmer</td>
  </tr>
</table>

Genau wie bei den Überschriften-Elementen h1-h6 ist auch das hier kein reiner Optik-Trick: <th> sagt Screenreadern "das hier ist die Überschrift für diese Spalte", was blinden Nutzern hilft zu verstehen, zu welcher Spalte eine bestimmte Zelle gehört, wenn die Tabelle vorgelesen wird.

thead und tbody: optional, aber empfohlen

Um noch klarer zu machen, welcher Teil der Tabelle der Kopf und welcher der eigentliche Inhalt ist, kannst du <thead> ("table head") um die Kopfzeile und <tbody> ("table body") um die Datenzeilen packen:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Finn</td>
      <td>Stürmer</td>
    </tr>
  </tbody>
</table>

caption: die Überschrift der ganzen Tabelle

<caption> gibt der gesamten Tabelle einen Titel - vergleichbar mit <figcaption> bei Bildern. <caption> steht direkt nach dem öffnenden <table>-Tag, noch vor <thead>:

<table>
  <caption>Meine Lieblingsspieler</caption>
  <thead>
    ...
  </thead>
  ...
</table>

Die vollständige, saubere Tabelle

Bauen wir Finns Spielertabelle jetzt mit allen gelernten Elementen ordentlich auf:

<h2>Meine Lieblingsspieler</h2>
<table>
  <caption>Spieler, Position und Verein</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Verein</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Spieler A</td>
      <td>Stürmer</td>
      <td>Verein A</td>
    </tr>
    <tr>
      <td>Spieler B</td>
      <td>Torwart</td>
      <td>Verein B</td>
    </tr>
  </tbody>
</table>