Zwei Varianten für eine table caption

Autor: Aykut Şensoy, Datum: 01.04.2023

Die Erstellung von Tabellen in HTML hat nach wie vor eine große Bedeutung bei der Visualisierung von bestimmten Datenstrukturen im Internet. Neben einer guten Semantik ist für SEO vor allem das Hinzufügen einer table caption, also einer Tabellenüberschrift, von großem Vorteil. Denn oft erschließt sich der Inhalt einer Tabelle für Mensch und Maschine nur über den hinzugefügten Titel. Weiterhin kann man in der table caption auch wichtige Informationen wie die Quelle oder das Datum der Tabelle unterbringen. HTML5 stellt zwei Arten bereit, wie man eine table caption definieren kann. Ebenso ist es in beiden Varianten möglich die table caption oberhalb oder unterhalb der Tabelle zu rendern, wenn auch jeweils mit einem ganz anderen Ansatz.

1. caption-Tag

Die erste Variante zur Erstellung einer table caption ist die Verwendung eines caption-Tags. Der caption-Tag ist ein sehr spezifischer Tag, welches nur innerhalb des table-Tags verwendet wird. Es hat einen eigenen display-type und bietet darüber hinaus noch zwei Deklarationen für "text-align" und "caption-side". Das sind die default-Werte:

caption {
    display: table-caption;
    text-align: center;
    caption-side: top;
}

Der caption-Tag darf ausschließlich als erstes Kind-Element innerhalb eines table-Tags definiert werden, sonst ist es invalide. Die Darstellung des Titels oberhalb oder unterhalb der Tabelle ist in dieser Variante nur durch die Deklaration "caption-side" möglich. D.h. der caption-Tag kann nicht einfach als letztes Kind-Element im table-Tag platziert werden, um den Titel unterhalb der Tabelle zu rendern. Er muss oben an der ersten Position bleiben und nur die Deklaration "caption-side" auf bottom gesetzt werden. Hier ein Beispiel:

<style>
table caption {
  caption-side: bottom;
}
</style>

<table>
  <caption>Protagonisten der Science-Fiction Geschichte Captain Future</caption>
  <tr>
    <th>Name</th>
    <th>Charakter</th>
  </tr>
  <tr>
    <td>Curtis Newton</td>
    <td>Captain Future</td>
  </tr>
  <tr>
    <td>Prof. Simon Wright</td>
    <td>Das lebende Gehirn</td>
  </tr>
  <tr>
    <td>Grag</td>
    <td>Roboter</td>
  </tr>
  <tr>
    <td>Otho</td>
    <td>Android</td>
  </tr>
</table>

2. figcaption-Tag

Die zweite Variante zur Erstellung einer table caption ist die Verwendung des figure-Tags kombiniert mit dem dazugehörigen figcaption-Tag. Im Gegensatz zum caption-Tag ist figure und figcaption nicht sehr spezifisch, sondern dient der Repräsentation von Bildern, Grafiken, Tabellen, Diagrammen, Embeds etc. Während es sich beim figure-Tag um ein semantisches Wrapper-Element handelt, ist die figcaption der eigentliche Tag, in dem die Tabellenüberschrift definiert wird.

Der figcaption-Tag darf ausschließlich als erstes oder als letztes Kind-Element innerhalb eines figure-Tags definiert werden, sonst ist es invalide. Die Darstellung des Titels oberhalb oder unterhalb der Tabelle ist in dieser Variante im Gegensatz zum caption-Tag nur durch die Platzierung der figcaption an der richtigen Position im HTML-Quellcode möglich. D.h. um die table caption unterhalb der Tabelle zu rendern, muss man nur den figcaption-Tag an die letzte Position innerhalb des figure-Tags schieben. Hier ein Beispiel:

<figure>
    <table>
      <tr>
        <th>Name</th>
        <th>Charakter</th>
      </tr>
      <tr>
        <td>Curtis Newton</td>
        <td>Captain Future</td>
      </tr>
      <tr>
        <td>Prof. Simon Wright</td>
        <td>Das lebende Gehirn</td>
      </tr>
      <tr>
        <td>Grag</td>
        <td>Roboter</td>
      </tr>
      <tr>
        <td>Otho</td>
        <td>Android</td>
      </tr>
    </table>
    <figcaption>Protagonisten der Science-Fiction Geschichte Captain Future</figcaption>
</figure>