HTML caption

Table caption – Titel, Überschrift der Tabelle – Infos für Benutzer und Navigation

HTML table caption platziert einen Titel oder eine Legende mit Erklärungen zu einer Tabelle, und zwar entweder über (Vorgabe) oder unter der Tabelle.

Das caption-Tag muss direkt hinter dem öffnenden table-Tag stehen, auch noch vor einem colgroup-Tag.

HTML table caption

Jede Tabelle kann nur einen Kommentar, d.h. nur ein caption-Tag, enthalten. table caption ist ein Block-Tag (mit Zeilenumbruch) und muss geschlossen werden. Innerhalb von caption-Tags können weitere Tags und auch Block-Elemente wie p oder div liegen.

Pegel DUISBURG-RUHRORT

Quelle: Wasserstände an schifffahrtsrelevanten Pegeln

TagPegelÄnderung
7.11 182 -1
8.11 177 -5
9.11 170 -7
10.11 168 -2
11.11 170 +2
12.11 177 +7
13.11 188 +11
HTML table mit caption Markup
<table class="elvis">
   <caption>
      <p>Pegel DUISBURG-RUHRORT</p>
      <p>Quelle: <a href="">…</a></p>
   </caption>
   <tr>
      <th>Tag</th><th>Pegel</th><th>Änderung</th>
   </tr>
   <tr>
      <td>7.11</td>
      <td>182</td>
      <td>-1</td>
   </tr>
   …

Der Text im caption-Tag erscheint per Vorgabe zentriert über der Tabelle und kann durch HTML-Inline-Tags wie strong oder em und CSS-Eigenschaften formatiert werden.

CSS für caption
caption { 
	caption-side: bottom; 
	margin-top: 1em; 
	border-top: 1px solid silver; 
	font-style: italic;
}

CSS caption-side (top, bottom, initial) entscheidet, ob caption über oder am Ende der Tabelle erscheint. Das alte align-Attribut aus HTML4 gibt es nicht mehr.

Veraltete Attribute für table und caption

align left, right, top-outside, bottom-outside gab es einst in HTML4, aber kein Browser machte mit. Danach wurden die Werte aus dem Standard genommen und sind in HTML5 keine validen Attribute. Einzig CSS caption-side versetzt die Tabellenüberschrift.

Es gab auch ein summery-Attribut für das table-Tag, das aus HTML5 herausgefallen ist. Anstelle von summery soll die kurze Zusammenfassung zum Inhalt / zur Struktur in caption geschrieben werden.

Table Caption mit figcaption

Außerdem ist heute das HTML figure mit figcaption bestens geeignet, Erklärungen zur Tabelle abzugeben, ähnlich wie Kästen mit Abbildungen in Fachzeitschriften und Fachbüchern.

TagPegelÄnderung
7.11 182 -1
8.11 177 -5
9.11 170 -7
10.11 168 -2
11.11 170 +2
12.11 177 +7
13.11 188 +11
Pegel DUISBURG-RUHRORT
Quelle: Wasserstände an schifffahrtsrelevanten Pegeln

Wenn eine HTML-Tabelle in einem figure-Element sitzt, soll dem figcaption-Tag der Vorzug gegenüber dem caption-Tag der Tabelle gegeben werden.

<caption> </caption>