HTML <caption>-Tag
Das HTML <caption>-Tag definiert einen Titel für eine Tabelle. Es muss das erste Kind von <table> sein. Syntax, Styling und Barrierefreiheit.
Das <caption>-Tag wird verwendet, um einen Titel oder eine Beschreibung für eine Tabelle zu definieren. Es ist keine Spaltenüberschrift (verwende dafür <th>). Das Tag selbst muss sich innerhalb des <table>-Elements befinden, unmittelbar nach dem öffnenden Tag, und es muss das erste Kind seines übergeordneten <table>-Elements sein. Pro Tabelle ist nur eine Caption erlaubt.
Standardmäßig wird eine Tabellenbeschriftung zentriert oberhalb der Tabelle ausgerichtet. Du kannst die Eigenschaften text-align und caption-side verwenden, um sie auszurichten und zu positionieren.
Wann <caption> vs. <figcaption> verwenden
Es gibt zwei Möglichkeiten, eine Tabelle zu beschriften, und die richtige hängt vom Container der Tabelle ab:
- Verwende
<caption>, wenn die Tabelle eigenständig ist. Die Caption gehört in das<table>-Element und ist programmatisch damit verknüpft. - Verwende
<figcaption>, wenn die Tabelle der einzige Inhalt eines<figure>-Elements ist. In diesem Fall übernimmt die Figure die Beschriftung, sodass ein separates<caption>nicht verwendet wird.
<figure>
<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter (km)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,742</td>
</tr>
<tr>
<td>Mars</td>
<td>6,779</td>
</tr>
</tbody>
</table>
<figcaption>Diameters of the inner planets</figcaption>
</figure>Hier ist die Tabelle der einzige Inhalt der Figure, daher befindet sich die Beschriftung in <figcaption> (das im Gegensatz zu <caption> auch nach der Tabelle platziert werden kann).
Syntax
Das <caption>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<caption>) und dem schließenden (</caption>) Tag geschrieben.
Beispiel des HTML <caption>-Tags:
HTML <caption>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Ergebnis
Die gerenderte Tabelle zeigt die Caption „Evaluation paper" zentriert über den Daten:
Beispiel des HTML <caption>-Tags mit der CSS caption-side-Eigenschaft:
Beispiel des HTML <caption>-Tags mit der CSS caption-side-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left, right, center, top, bottom | Richtet die Caption horizontal oder vertikal aus. Wird in HTML5 nicht mehr verwendet. Verwende stattdessen CSS caption-side. |
Das <caption>-Tag unterstützt die globalen Attribute und die Ereignisattribute.
Barrierefreiheit: Warum <caption> wichtig ist
Ein <caption> ist mehr als ein sichtbarer Titel — es ist der zugängliche Name der Tabelle. Da das Element ein Kind von <table> ist, verknüpfen Browser beide automatisch; du benötigst weder aria-labelledby noch zusätzliches Markup. Wenn ein Screenreader die Tabelle betritt, kündigt er die Caption zuerst an und gibt dem Benutzer Kontext („Evaluation paper, Tabelle mit 3 Spalten"), bevor Zellen vorgelesen werden. Ohne Caption hört der Benutzer eine Abfolge von Zahlen, ohne zu wissen, was sie beschreiben.
Wenn der Titel visuell versteckt werden muss
Manchmal befindet sich bereits eine Überschrift neben der Tabelle, und eine sichtbare Caption würde redundant wirken. Lass die Caption nicht weg — das entfernt den Kontext für sehbeeinträchtigte Benutzer. Behalte stattdessen das <caption> und verstecke es visuell mit CSS, während es im Accessibility-Tree verbleibt:
caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}Ein aria-label auf dem <table> kann ebenfalls einen zugänglichen Namen bereitstellen, aber <caption> ist bevorzugt: Es funktioniert ohne ARIA, ist Teil des Dokumenttexts (wird also übersetzt und ist durchsuchbar), und die visuell-versteckte Technik macht es für sehende Entwickler lesbar. Greife auf aria-label nur zurück, wenn du keine Caption zum Markup hinzufügen kannst.
<caption> ersetzt das veraltete summary-Attribut
Älteres HTML hatte ein summary-Attribut auf <table>, das eine Beschreibung für Screenreader-Benutzer enthielt. Es war nie sichtbar und ist in HTML5 veraltet — verwende es nicht. Der moderne, barrierefreie Ersatz ist ein <caption> für den kurzen Titel sowie ein regulärer Absatz (optional verknüpft mit aria-describedby), wenn eine längere Erklärung der Tabellenstruktur benötigt wird.
So gestaltest du das <caption>-Tag
Die Caption ist eine Block-Level-Box, die du wie jedes andere Element gestalten kannst. Die häufigsten Anpassungen betreffen ihre Position relativ zur Tabelle, ihre Ausrichtung und ihre Hervorhebung:
caption {
caption-side: bottom; /* move the caption below the table (default is top) */
text-align: left; /* override the default centering */
font-weight: bold;
padding: 6px;
color: #1c87c9;
}Weitere Details findest du unter den Eigenschaften caption-side und text-align sowie beim <table>-Tag für das vollständige Tabellen-Markup.