CSS, HTML und Javascript mit {stil}

caption • Überschrift einer Tabelle

HTML table caption

HTML caption platziert eine Überschrift oder Legende zu einer Tabelle. Der Kommentar taucht nicht in der Tabelle auf, sondern außerhalb – entweder über (Vorgabe) oder unter der Tabelle.

caption muss direkt hinter dem table-Tag stehen, auch noch vor dem colgroup-Tag.

Jede Tabelle kann nur einen Kommentar, d.h. nur ein caption-Tag, enthalten. Das caption-Tag muss geschlossen werden.

Der Text in den öffnenden und schließenden caption-Tags erscheint per Vorgabe zentriert über der Tabelle und kann durch HTML-Inline-Tags wie stong oder em und CSS-Eigenschaften formatiert werden.

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.

Beispiel: Besucher mit mobilen Geräten
Gerätekategorie Besuche Seiten/Besuch
Auszug aus Analytics (Jan 2014)
desktop 36.648 8,05
mobile 11.247 5,86
tablet 7.446 8,01
caption { caption-side: bottom}
<table>
    <caption>Beispiel: Besucher mit mobilen Geräten</caption>
    <thead>
        <tr>
            <th>Gerätekategorie</th>
            <th>Besuche</th>
            <th>Seiten/Besuch</th>
        </tr>
    </thead>
…
</table>

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.

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.