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

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

HTML table caption

Jede HTML-Tabelle kann nur ein caption-Element enthalten. Das öffnende caption-Tag muss direkt hinter dem öffnenden table-Tag stehen, auch noch vor einem colgroup-Tag.

table caption ist ein Block-Tag (mit Zeilenumbruch) und muss geschlossen werden. Innerhalb des öffnenden und schließenden caption-Tags können weitere HTML-Elemente wie p oder div liegen und natürlich auch Links.

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

Icon Schiff

Quelle: Wasserstände an schifffahrtsrelevanten Pegeln

TagPegelÄnderung
7.11182-1
8.11177-5
9.11170-7
10.11168-2
11.11170+2
12.11177+7
13.11188+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 summary-Attribut für das table-Tag, das aus HTML5 herausgefallen ist. Anstelle von summary 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.11182-1
8.11177-5
9.11170-7
10.11168-2
11.11170+2
12.11177+7
13.11188+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.