Mit HTML Table Headings sorgen Sie in Ihren Tabellen für mehr Struktur. Das er­for­der­li­che HTML-<th>-Tag hebt Spalten oder Zeilen se­man­tisch und optisch hervor und ist somit für User, Such­ma­schi­nen und Screen­rea­der glei­cher­ma­ßen relevant.

Was ist HTML <th> (Table Headings)?

Das HTML-<th>-Tag (Table Header) wird dazu verwendet, Kopf­zel­len in HTML-Tabellen zu de­fi­nie­ren. Die so for­ma­tier­ten Zellen dienen als Über­schrif­ten für die be­trof­fe­nen Spalten oder Zeilen der Tabelle und sind in der Regel fett gedruckt und zentriert. Bei Bedarf lässt sich die Dar­stel­lung via CSS wunsch­ge­mäß anpassen. HTML Table Headings sind innerhalb eines <tr>-Tags (Table Row) zu verwenden, wobei die Position innerhalb der Tabelle grund­sätz­lich keine Rolle spielt. Ty­pi­scher­wei­se findet das Element aber vor allem in der Kopfzeile oder der ersten Spalte einer Tabelle Anwendung.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Warum sind HTML-Tabellen-Über­schrif­ten sinnvoll?

HTML Table Headings helfen Ihnen dabei, Ihre Tabellen zu struk­tu­rie­ren und den Inhalt zu be­schrei­ben. Ihr Einsatz ist aus ver­schie­de­nen Gründen sinnvoll und emp­feh­lens­wert:

  • Or­ga­ni­sa­ti­on von Daten: Über­schrif­ten mit dem HTML-<th>-Tag helfen dabei, die Daten in der Tabelle klar und or­ga­ni­siert dar­zu­stel­len. Sie geben den Spalten oder Zeilen eine be­schrei­ben­de Be­zeich­nung, die erklärt, welche Art von Daten zu erwarten ist.
  • Ver­bes­ser­te Les­bar­keit: HTML <th> macht es Usern einfacher, die auf­ge­führ­ten Daten zu verstehen. Die visuell her­vor­ge­ho­be­nen Über­schrif­ten trennen ver­schie­de­ne Ka­te­go­rien oder Gruppen von Daten klar und er­leich­tern so das Auffinden spe­zi­fi­scher In­for­ma­tio­nen.
  • Bar­rie­re­frei­heit: Ta­bel­len­über­schrif­ten sind besonders wichtig für die Bar­rie­re­frei­heit. Screen­rea­der verwenden <th>-Elemente, um die Struktur und den Kontext der Tabelle zu erklären. Durch zu­sätz­li­che Attribute wie scope oder headers können Sie noch deut­li­cher machen, welche Daten zu welcher Über­schrift gehören.
Tipp

Über­schrif­ten sind nur eines von vielen Mitteln, um Tabellen in HTML zu gestalten. In unserem separaten Artikel über HTML Table Styling gehen wir de­tail­liert darauf ein, welche Mög­lich­kei­ten Sie besitzen, um Texte und Felder optisch an­zu­pas­sen.

Die Syntax des <th>-Tags (inkl. Bei­spiel­ta­bel­le)

Um eine Ta­bel­len­über­schrift mit dem HTML-<th>-Tag fest­zu­le­gen, benötigen Sie lediglich ein ein­lei­ten­des <th>-Tag und ein schlie­ßen­des </th>-Tag. Innerhalb der beiden Tags befindet sich der ge­wünsch­te Text der Über­schrift. Optional können Sie das ein­lei­ten­de Tag um Attribute erweitern, um das Verhalten und die Dar­stel­lung des <th>-Elements zu steuern. Die grund­le­gen­de Syntax (hier mit Platz­hal­tern für Attribute) sieht folglich so aus:

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

Zu den wich­tigs­ten At­tri­bu­ten 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-Klas­sen­na­men, die zur Stil­de­fi­ni­ti­on verwendet werden können
  • style: Für Inline-CSS zur in­di­vi­du­el­len Ge­stal­tung der Kopfzelle

Ab­schlie­ßend ver­deut­li­chen wir die Syntax von HTML <th> an einem einfachen Beispiel: In der Tabelle werden die Ka­te­go­rien und Preise für die drei Produkte „Apfel“, „Brot“ und „Saft“ vor­ge­stellt. Sowohl die Kopfzeile als auch die erste Spalte zeichnen wir dabei als Über­schrift 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:

Bild: HTML Table Headings Beispiel
Einfache Dar­stel­lung des Beispiels für eine HTML Tabelle mit Über­schrif­ten (ohne CSS-An­wei­sun­gen)

Kom­bi­na­ti­on mit dem <caption>-Tag

Sie können einer HTML-Tabelle auch eine Über­schrift geben, die der gesamten Tabelle vor­an­steht. Hierfür fügen Sie einfach ein <caption>-Element ein (mit öffnendem und schlie­ßen­dem Tag), nachdem Sie die Tabelle mit <table> gestartet haben. Die Ge­stal­tung und Po­si­tio­nie­rung dieser Über­schrift bestimmen Sie mithilfe von CSS. Sie können den Text so zum Beispiel auch unterhalb einer Tabelle plat­zie­ren.

Fügen wir unserem Beispiel aus dem vor­an­ge­gan­ge­nen Abschnitt eine <caption>-Über­schrift „Bei­spiel­ta­bel­le 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 Be­schrif­tung für unsere Bei­spiel­ta­bel­le:

Bild: HTML-Tabelle: Beispiel mit caption-Tag
Nach dem Hin­zu­fü­gen der Caption steht der Bei­spiel­ta­bel­le die ge­wünsch­te Über­schrift (ohne CSS-An­wei­sun­gen) voran.
Tipp

Mehr spannende In­for­ma­tio­nen rund um die Aus­zeich­nungs­spra­che finden Sie in unserem großen HTML-Ein­stei­ger-Tutorial.

Zum Hauptmenü