Mit dem CAPTION-Element lässt sich eine Tabelle beschriften. Das caption-Element ist für den Titel einer Datentabelle vorgesehen, sofern eine Datentabelle auf dieser Weise beschriftet wird. Das caption-Element muss das erste Kindelement des table-Elements sein. Innerhalb des caption-Elements dürfen diverse Elemente vorkommen einschließlich Überschriften oder erweiterbare Schaltflächen.
Im einfachen Fall enthält das caption-Element nur Text:
<table>
<caption>Titel der Tabelle</caption>
… Rest der Tabelle …
</table>
Wird ein caption-Element für eine Tabelle eingesetzt, wird der enthaltene Text normalerweise zum Namen der Tabelle. Wenn die Beschriftung zum Namen der Tabelle wird, ist ein kurzer und prägnanter Titel geboten. Weitere Informationen dazu finden Sie in Tabellen benötigen einen Namen.
Verzicht auf das caption-Element
Es gibt Situationen, in denen Sie auf das caption-Element verzichten können oder sollten:
Der Titel einer Tabelle und eine vorangestellte Überschrift stellen alternative Möglichkeiten dar, die Beschriftung der Tabelle auszuzeichnen. Wenn eine Tabelle einen Abschnitt darstellt und deshalb ihre Beschriftung durch eine vorangestellte Überschrift erhält, dann benötigt das table-Element kein zusätzliches caption-Element.
Der HTML-Standard gibt außerdem vor, dass wenn eine Tabelle in einem figure-Element steht, dann das figcaption-Element für die Beschriftung der Tabelle vorzuziehen ist.
Hinweise zur Gestaltung
Bei der Gestaltung von caption-Elementen können folgende Tipps hilfreich sein:
Standardmäßig werden caption-Elemente oberhalb von Tabellen dargestellt. Wenn Sie die Beschriftung unterhalb der Tabelle positionieren wollen, dann können Sie das mit CSS steuern: table {caption-side:bottom;}
Ein caption-Element erbt die Hintergrundfarbe der zugehörigen Tabelle nicht. Wenn Sie möchten, dass die Tabellenbeschriftung die gleiche Hintergrundfarbe wie die Tabelle erhält, müssen Sie dem caption-Element die Hintergrundfarbe zusätzlich zuweisen.
