HTML Table Headings: So nutzen Sie das th-Tag

Mit HTML Table Headings sorgen Sie in Ihren Tabellen für mehr Struktur. Das erforderliche HTML-<th>-Tag hebt Spalten oder Zeilen semantisch und optisch hervor und ist somit für User, Suchmaschinen und Screenreader gleichermaßen relevant.

Was ist HTML <th> (Table Headings)?

Das HTML-<th>-Tag (Table Header) wird dazu verwendet, Kopfzellen in HTML-Tabellen zu definieren. Die so formatierten Zellen dienen als Überschriften für die betroffenen Spalten oder Zeilen der Tabelle und sind in der Regel fett gedruckt und zentriert. Bei Bedarf lässt sich die Darstellung via CSS wunschgemäß anpassen. HTML Table Headings sind innerhalb eines <tr>-Tags (Table Row) zu verwenden, wobei die Position innerhalb der Tabelle grundsätzlich keine Rolle spielt. Typischerweise findet das Element aber vor allem in der Kopfzeile oder der ersten Spalte einer Tabelle Anwendung.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

Warum sind HTML-Tabellen-Überschriften sinnvoll?

HTML Table Headings helfen Ihnen dabei, Ihre Tabellen zu strukturieren und den Inhalt zu beschreiben. Ihr Einsatz ist aus verschiedenen Gründen sinnvoll und empfehlenswert:

  • Organisation von Daten: Überschriften mit dem HTML-<th>-Tag helfen dabei, die Daten in der Tabelle klar und organisiert darzustellen. Sie geben den Spalten oder Zeilen eine beschreibende Bezeichnung, die erklärt, welche Art von Daten zu erwarten ist.
  • Verbesserte Lesbarkeit: HTML <th> macht es Usern einfacher, die aufgeführten Daten zu verstehen. Die visuell hervorgehobenen Überschriften trennen verschiedene Kategorien oder Gruppen von Daten klar und erleichtern so das Auffinden spezifischer Informationen.
  • Barrierefreiheit: Tabellenüberschriften sind besonders wichtig für die Barrierefreiheit. Screenreader verwenden <th>-Elemente, um die Struktur und den Kontext der Tabelle zu erklären. Durch zusätzliche Attribute wie scope oder headers können Sie noch deutlicher machen, welche Daten zu welcher Überschrift gehören.
Tipp

Überschriften sind nur eines von vielen Mitteln, um Tabellen in HTML zu gestalten. In unserem separaten Artikel über HTML Table Styling gehen wir detailliert darauf ein, welche Möglichkeiten Sie besitzen, um Texte und Felder optisch anzupassen.

Die Syntax des <th>-Tags (inkl. Beispieltabelle)

Um eine Tabellenüberschrift mit dem HTML-<th>-Tag festzulegen, benötigen Sie lediglich ein einleitendes <th>-Tag und ein schließendes </th>-Tag. Innerhalb der beiden Tags befindet sich der gewünschte Text der Überschrift. Optional können Sie das einleitende Tag um Attribute erweitern, um das Verhalten und die Darstellung des <th>-Elements zu steuern. Die grundlegende Syntax (hier mit Platzhaltern für Attribute) sieht folglich so aus:

<th attribut1="" attribut2="" …>Überschrift</th>
html

Zu den wichtigsten Attributen für HTML Table Headings zählen folgende:

  • scope: Gibt an, ob sich die Kopfzelle auf eine Spalte (col) oder eine Zeile (row) bezieht
  • colspan: Definiert die Anzahl an Spalten, für die die Kopfzelle gilt
  • rowspan: Definiert die Anzahl an Zeilen, für die die Kopfzelle gilt
  • class: Angabe von CSS-Klassennamen, die zur Stildefinition verwendet werden können
  • style: Für Inline-CSS zur individuellen Gestaltung der Kopfzelle

Abschließend verdeutlichen wir die Syntax von HTML <th> an einem einfachen Beispiel: In der Tabelle werden die Kategorien und Preise für die drei Produkte „Apfel“, „Brot“ und „Saft“ vorgestellt. Sowohl die Kopfzeile als auch die erste Spalte zeichnen wir dabei als Überschrift aus. Mit dem Attribut scope wird für jede Kopfzelle definiert, ob sie eine Reihe oder Spalte betitelt:

<html>
<table>
    <tr>
        <th scope="col">Produkt</th>
        <th scope="col">Kategorie</th>
        <th scope="col">Preis</th>
    </tr>
    <tr>
        <th scope="row">Apfel</th>
        <td>Obst</td>
        <td>1,50 €</td>
    </tr>
    <tr>
        <th scope="row">Brot</th>
        <td>Backwaren</td>
        <td>2,00 €</td>
    </tr>
    <tr>
        <th scope="row">Saft</th>
        <td>Getränke</td>
        <td>1,00 €</td>
    </tr>
</table>
</body>
</html>
html

Die Tabelle sieht dann auf der Website in etwa so aus:

html-table-heading-beispiel.png
Einfache Darstellung des Beispiels für eine HTML Tabelle mit Überschriften (ohne CSS-Anweisungen)

Kombination mit dem <caption>-Tag

Sie können einer HTML-Tabelle auch eine Überschrift geben, die der gesamten Tabelle voransteht. Hierfür fügen Sie einfach ein <caption>-Element ein (mit öffnendem und schließendem Tag), nachdem Sie die Tabelle mit <table> gestartet haben. Die Gestaltung und Positionierung dieser Überschrift bestimmen Sie mithilfe von CSS. Sie können den Text so zum Beispiel auch unterhalb einer Tabelle platzieren.

Fügen wir unserem Beispiel aus dem vorangegangenen Abschnitt eine <caption>-Überschrift „Beispieltabelle für Produkte und Preise“ hinzu, sieht der passende Code wie folgt aus:

<html>
<table>
<caption>Beispieltabelle für Produkte und Preise</caption>
    <tr>
        <th scope="col">Produkt</th>
        <th scope="col">Kategorie</th>
        <th scope="col">Preis</th>
    </tr>
    <tr>
        <th scope="row">Apfel</th>
        <td>Obst</td>
        <td>1,50 €</td>
    </tr>
    <tr>
        <th scope="row">Brot</th>
        <td>Backwaren</td>
        <td>2,00 €</td>
    </tr>
    <tr>
        <th scope="row">Saft</th>
        <td>Getränke</td>
        <td>1,00 €</td>
    </tr>
</table>
</body>
</html>
html

Auf der Website sehen wir nun die neue Beschriftung für unsere Beispieltabelle:

table-heading-caption-beispiel.png
Nach dem Hinzufügen der Caption steht der Beispieltabelle die gewünschte Überschrift (ohne CSS-Anweisungen) voran.
Tipp

Mehr spannende Informationen rund um die Auszeichnungssprache finden Sie in unserem großen HTML-Einsteiger-Tutorial.

War dieser Artikel hilfreich?