Tabellenüberschriften

Das Element <th> wird ebenso verwendet wie <td>, steht aber für die Überschrift einer Spalte oder Zeile.

Hat eine Zelle keinen Inhalt, muss man trotzdem das Element <td> oder <th> verwenden, das Vorhandensein der leeren Zelle zu kennzeichnen, da die Tabelle ansonsten falsch dargestellt wird.

Überschriften, die man mit <th> hinzufügen, sind hilfreich für Personen, die Screenreader einsetzen.. Außerdem können Suchmaschinen die Seite dann besser indizieren.

Mit dem Attribut scope von <th> gibt man an, ob die Überschrift für Spalten oder für Zeilen gilt.

scope="row" gibt an das die Überschrift für die Zeile gilt.

scope="col" gibt an das die Überschrift für die Spalte gilt.

 

Beispiel:

<table>

<tr>

<th></th>

<th scope="col">Ergebnis</th>

<th scope="col">Ergebnis</th>

<th scope="col">Ergebnis</th>

</tr>

<tr>

<th scope="row">Multiplikation 2x5</th>

<td>5</td>

<td>10</td>

<td>15</td>

</tr>

<tr>

<th scope="row">Multiplikation 2x6</th>

<td>6</td>

<td>12</td>

<td>18</td>

</tr>

<tr>

<th scope="row">Multiplikation 2x7</th>

<td>7</td>

<td>14</td>

<td>21</td>

</tr>

</table>

 

Darstellung:

  Ergebnis Ergebnis Ergebnis
Multiplikation 2x5 5 10 15
Multiplikation 2x6 6 12 18
Multiplikation 2x7 7 14 21