HTML caption, Überschrift für Tabellen

HTML Table caption

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 gibt es nur in HTML-Tabellen und es muss direkt hinter dem öffnenden table-Tag stehen, auch noch vor einem colgroup-Tag.

18-12-15 SITEMAP

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.

Natürlich könnte man auch eine HTML-Überschrift – z.B. in einem h3-Tag – über die Tabelle setzen. Aber dann besteht kein semantischer Zusammenhang zwischen der Tabelle und der Überschrift.

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>
      <h4>Pegel DUISBURG-RUHRORT</h4>
      <img src="" alt="logo">
      <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-Tags wie strong oder em betont werden, aber auch mit HTML-Block-Elementen wie Header, mit Bildern 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.

Tabllenüberschrift mit figcaption

Tabellen können innerhalb von figure-Elemente gesetzt werden und das HTML figure mit figcaption wäre ebenfalls 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
<figure>
   <table class="elvis">
      <tr>
         <th>Tag</th><th>Pegel</th><th>Änderung</th>
      </tr>
      <tr>
         <td>7.11</td>
         <td>182</td>
         <td>-1</td>
      </tr>
      …
      <tr>
         <td>13.11</td>
         <td>188</td>
         <td>+11</td>
      </tr>
   </table>
   <figcaption>Wasserstände an schifffahrtsrelevanten Pegeln</figcaption>
</figure>

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