HTML caption: Tabellentitel oben oder unten anzeigen
HTML <caption> kennzeichnet den Titel oder eine kurze Beschreibung der gesamten Tabelle. Das caption-Element steht in HTML als erstes Kindelement von table. Mit der CSS-Eigenschaft caption-side steuern Sie die Anzeige oberhalb oder unterhalb der Tabelle.
Unterscheiden Sie Tabellentitel von Spalten- und Zeilenüberschriften
caption beschreibt das Thema der gesamten Tabelle; th kennzeichnet eine bestimmte Spalten- oder Zeilenüberschrift. Wird der Titel stattdessen in ein td der ersten Zeile geschrieben, ändert sich die Beziehung zwischen Tabellentitel und Datenzellen. Beschreiben Sie Thema und Umfang konkret statt nur „Tabelle 1“, damit der Zweck beim Überfliegen oder Navigieren mit assistiver Technik klar ist.
Verwenden Sie nur ein caption pro table. Fügen Sie ausführliche Interpretationen, Warnhinweise oder Datenquellen in den umliegenden Text ein, anstatt den Tabellentitel auf mehrere caption-Elemente zu verteilen.
Vollständiges Beispiel: Überprüfen Sie die Position der Beschriftung
Speichern Sie den Code als table-caption.html und öffnen Sie ihn im Browser. Die Zahlen sind Übungsdaten, die verwendet werden, um die Tabellenstruktur zu erklären.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Position einer Tabellenbeschriftung</title>
<style>
body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
.jb-table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
</style>
</head>
<body>
<h1>Übungsdaten</h1>
<div class="jb-table-scroll">
<table class="jb-table-01">
<caption>Anzahl von Beispieldokumenten je Kategorie in einer Übungsbibliothek</caption>
<thead>
<tr><th scope="col">Kategorie</th><th scope="col">Dokumente</th></tr>
</thead>
<tbody>
<tr><th scope="row">HTML</th><td>3</td></tr>
<tr><th scope="row">CSS</th><td>2</td></tr>
</tbody>
</table>
</div>
</body>
</html>Die Beschriftung Anzahl von Beispieldokumenten je Kategorie in einer Übungsbibliothek erscheint über der Tabelle, gefolgt von den Spalten Kategorie und Dokumente sowie zwei Datenzeilen. caption erklärt den Zweck der Tabelle, während th-Elemente mit scope die Spalten- und Zeilenüberschriften kennzeichnen.
Ändern Sie das CSS caption-side: top in caption-side: bottom und laden Sie die Seite neu. Der Titel verschiebt sich unter die Tabelle, bleibt aber das erste Kindelement in HTML. Ändern Sie es zurück zu top, um die ursprüngliche Position wiederherzustellen. Verwenden Sie text-align für die horizontale Ausrichtung anstelle des veralteten align-Attributs.
Schreiben Sie nützliche Tabellenbeschriftungen
Ein caption ist ein sichtbarer Titel und hilft dabei, einen zugänglichen Namen für die Tabelle bereitzustellen. Das tatsächliche Verhalten von Screenreadern hängt vom Browser, der unterstützenden Technologie und anderen Barrierefreiheitsattributen ab. Das Hinzufügen einer Tabellenbeschriftung allein löst nicht jedes Barrierefreiheitsproblem in einer komplexen Tabelle: Überprüfen Sie auch die Beziehungen zwischen Kopfzeilen und Datenzellen sowie die Lesereihenfolge.
Die Hintergrundfarbe eines table-Elements wird nicht automatisch auf dessen caption-Element übertragen; legen Sie den Hintergrund der Beschriftung bei Bedarf separat fest. Ist eine Tabelle der einzige Inhalt eines figure-Elements, beschriften Sie dieses mit figcaption, anstatt denselben Titel in caption und figcaption zu wiederholen. Die MDN-Referenz zu caption enthält Regeln und Beispiele.
