Tag <th>

Tag <th>

Definition

Status: Aktueller Standard

Das Tag <th> steht für table header (Tabellenüberschrift).

Das Tag <th> ist das Herzstück einer barrierefreien Datentabelle. Es definiert eine Zelle als Überschrift, was sie fundamental von einer normalen Datenzelle (<td>) unterscheidet. Aktuelle Browser stellen <th> zentriert und in Fettschrift dar. Wichtiges Attribut (und sollte stets verwendet werden) ist das scope-Attribut.

Syntax

<table>
  <tr>
    <th scope="col">Überschrift 1</th>
    <th scope="col">Überschrift 2</th>
  </tr>
  <tr>
    <td>Inhalt 1</td>
    <td>Inhalt 2</td>
  </tr>
</table>

Attribute bzw. Unterelemente

scope

Screenreader nennen Überschrift und Wert wenn ein Wert der Spalte geklickt wird

colspan

Überspannt mehrere Spalten.

rowspan

Überspannt mehrere Zeilen.

headers

Explizite Verknüpfung mit Datenzellen über id

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <th> - mit allen Elementen

Der Code:

<table>
  <caption>Beispieltabelle mit colspan und rowspan</caption>
  <thead>
   <tr>
    <th scope="col">Tag</th>
    <th scope="col" colspan="2">Umsatz</th>
    <th scope="col">Status</th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <td rowspan="2">Montag</td>
    <td>Online</td>
    <td>500€</td>
    <td rowspan="2">Aktiv</td>
   </tr>
   <tr>
    <td>Laden</td>
    <td>300€</td>
   </tr>
   <tr>
    <td>Dienstag</td>
    <td colspan="2">800€ Gesamt</td>
    <td>Aktiv</td>
   </tr>
  <tr>
   <td>Mittwoch</td>
   <td>Online</td>
   <td>450€</td>
   <td rowspan="2">Inaktiv</td>
  </tr>
  <tr>
   <td>Donnerstag</td>
   <td colspan="2">700€ Gesamt</td>
  </tr>
  </tbody>

  <tfoot>
   <tr>
    <td colspan="5">Alle Elemente der Tabelle im Einsatz</td>
  </tr>
</tfoot>

</table>

Ergebnis:

Ergebnis: <th>-Demo 1
mit allen Elementen