HTML caption, Überschrift für Tabellen

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.

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

Tag	Pegel	Ä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

<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.

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.

<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.