Einfache Header-Zuordnungen

Tabellendaten müssen mit den Kopfzellen verbunden sein

Das “scope”-Attribut verbindet die Tabellenkopfzelle mit den Datenzellen. Für einfache Verknüpfungen gibt es die Optionen “col” für Spaltenüberschriften und “row” für Zeilenüberschriften.

Gutes Beispiel: Tabelle: Einfache Zeilen- und Spaltenüberschriften

Diese Tabelle zeigt einfache Zeilen- und Spaltenüberschriften.

In der folgenden Tabelle enthält die erste Zeile Überschriften, die für die entsprechenden Spalten darunter gelten, und die erste Spalte enthält Überschriften, die für die entsprechenden Zeilen gelten.

Jede Überschrift ist je nach Bedarf entweder mit <th scope="col"> oder <th scope="row"> gekennzeichnet.

Greensprings Running Club Personal Bests

Name	1 mile	5 km	10 km
Mary	8:32	28:04	1:01:16
Betsy	7:43	26:47	55:38
Matt	7:55	27:29	57:04
Todd	7:01	24:21	50:35

<table class="data">
  <caption>
    <strong>Greensprings Running Club Personal Bests</strong>
  </caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">1 mile</th>
      <th scope="col">5 km</th>
      <th scope="col">10 km</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Mary</th>
      <td>8:32</td>
      <td>28:04</td>
      <td>1:01:16</td>
    </tr>

    <tr>
      <th scope="row">Betsy</th>
      <td>7:43</td>
      <td>26:47</td>
      <td>55:38</td>
    </tr>

    <tr>
      <th scope="row">Matt</th>
      <td>7:55</td>
      <td>27:29</td>
      <td>57:04</td>
    </tr>

    <tr>
      <th scope="row">Todd</th>
      <td>7:01</td>
      <td>24:21</td>
      <td>50:35</td>
    </tr>
  </tbody>
</table>