<caption>

Zuletzt aktualisiert am 4. Februar 2026

Das <caption>-Element gibt einer Tabelle einen Titel oder eine Beschreibung. Du kannst es dir wie den alt-Text eines Bildes vorstellen — es erklärt, worum es in der Tabelle geht. Screenreader lesen <caption> als erstes vor, bevor sie die Tabelleninhalte präsentieren. Deshalb ist es eines der wichtigsten Elemente für barrierefreie Tabellen.

Grundlagen

Eine Tabelle ohne <caption> ist wie ein Diagramm ohne Überschrift: Man sieht die Daten, aber der Kontext fehlt. Besonders bei mehreren Tabellen auf einer Seite hilft <caption>, sie auseinanderzuhalten. Screenreader kündigen die Caption als Tabellennamen an, sodass blinde Nutzer sofort wissen, was sie erwartet.

• <caption> muss das erste Kind von <table> sein — vor <thead>, <colgroup> und allem anderen
• Pro Tabelle ist nur ein <caption> erlaubt
• Es kann beliebigen Inline-Inhalt enthalten (Text, <em>, <strong>, etc.)
• Browser zeigen <caption> standardmäßig zentriert über der Tabelle an
• Mit caption-side: bottom lässt sich die Position per CSS unter die Tabelle verschieben
• <caption> wird nicht als Spalte oder Zeile gezählt — es steht außerhalb des Tabellenrasters

Syntax

<table>
  <caption>Beliebte Programmiersprachen 2026</caption>
  <thead>
    <tr>
      <th scope="col">Sprache</th>
      <th scope="col">Einsatzgebiet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>Web-Entwicklung</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>Data Science & KI</td>
    </tr>
  </tbody>
</table>

Beispiele

Gestylte Caption

Die Standard-Caption ist zentriert und unscheinbar. Mit etwas CSS kannst du sie als richtige Überschrift gestalten — linksbündig, fett und mit Abstand zur Tabelle.

<table>
  <caption style="text-align: left; font-weight: bold;
    font-size: 1.1em; padding: 10px 0;">
    Monatliche Ausgaben — Januar 2026
  </caption>
  <thead>
    <tr>
      <th scope="col">Kategorie</th>
      <th scope="col">Betrag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Miete</td>
      <td>950,00 €</td>
    </tr>
    <tr>
      <td>Lebensmittel</td>
      <td>320,00 €</td>
    </tr>
    <tr>
      <td>Transport</td>
      <td>49,00 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Gesamt</td>
      <td>1.319,00 €</td>
    </tr>
  </tfoot>
</table>

Caption unterhalb der Tabelle

Mit caption-side: bottom wird die Beschriftung unter die Tabelle verschoben. Das ist nützlich für Quellenangaben oder ergänzende Hinweise.

<table>
  <caption style="caption-side: bottom; text-align: left;
    color: #6b7280; font-size: 0.9em;">
    Quelle: Eigene Erhebung, Stand Februar 2026
  </caption>
  <thead>
    <tr>
      <th scope="col">Framework</th>
      <th scope="col">GitHub Stars</th>
      <th scope="col">Downloads/Woche</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>React</td>
      <td>225k</td>
      <td>22M</td>
    </tr>
    <tr>
      <td>Vue</td>
      <td>210k</td>
      <td>4M</td>
    </tr>
    <tr>
      <td>Svelte</td>
      <td>80k</td>
      <td>700k</td>
    </tr>
  </tbody>
</table>

Caption mit zusätzlicher Beschreibung

Die Caption kann auch eine kurze Zusammenfassung des Tabelleninhalts liefern — besonders hilfreich für komplexe Datentabellen.

<table>
  <caption>
    <strong>Vergleich: SSR vs. SSG vs. CSR</strong>
    <br />
    <span style="color: #6b7280; font-size: 0.9em;">
      Rendering-Strategien für moderne Web-Anwendungen
    </span>
  </caption>
  <thead>
    <tr>
      <th scope="col">Eigenschaft</th>
      <th scope="col">SSR</th>
      <th scope="col">SSG</th>
      <th scope="col">CSR</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SEO</td>
      <td>Sehr gut</td>
      <td>Sehr gut</td>
      <td>Schlecht</td>
    </tr>
    <tr>
      <td>Ladezeit</td>
      <td>Mittel</td>
      <td>Schnell</td>
      <td>Langsam</td>
    </tr>
    <tr>
      <td>Dynamik</td>
      <td>Hoch</td>
      <td>Gering</td>
      <td>Hoch</td>
    </tr>
  </tbody>
</table>

Barrierefreiheit

<caption> ist eines der wichtigsten Elemente für barrierefreie Tabellen. Screenreader lesen die Caption als erstes vor, wenn ein Nutzer auf eine Tabelle trifft. Das gibt blinden Nutzern sofort den Kontext, bevor sie sich durch die Daten bewegen.

Ohne <caption> muss ein Screenreader-Nutzer erst mehrere Zellen lesen, um zu verstehen, worum es in der Tabelle geht. Bei mehreren Tabellen auf einer Seite wird das schnell unübersichtlich. Die Caption löst dieses Problem.

Wenn eine sichtbare Caption aus Design-Gründen nicht gewünscht ist, kannst du sie visuell mit CSS verstecken (z.B. über eine “visually-hidden”-Klasse), sodass sie nur für Screenreader zugänglich bleibt. Entferne sie aber nicht aus dem HTML — das wäre ein Barrierefreiheits-Problem.

Häufige Fehler

<caption> an der falschen Position: <caption> muss das allererste Kind-Element innerhalb von <table> sein. Es darf nicht nach <thead> oder <tbody> stehen. Browser korrigieren die Position zwar oft, aber das HTML ist ungültig.

<caption> mit <h1>-<h6> verwechseln: Manche Entwickler setzen eine Überschrift über die Tabelle statt ein <caption>. Das funktioniert visuell, aber Screenreader erkennen die Überschrift nicht als Tabellenbeschreibung. Die semantische Verknüpfung fehlt.

Leere <caption>: Ein leeres <caption>-Element bringt keinen Nutzen und kann Screenreader-Nutzer verwirren, weil der Reader eine leere Beschreibung ankündigt. Entweder sinnvollen Text einfügen oder das Element weglassen.

Zu lange Captions: Die Caption sollte kurz und prägnant sein — ein Satz reicht. Für ausführliche Erklärungen ist <caption> nicht gedacht. Nutze stattdessen Text vor oder nach der Tabelle.

Browser-Kompatibilität

Das caption-Element wird von allen modernen und älteren Browsern vollständig unterstützt, einschließlich der CSS-Eigenschaft caption-side für die Positionierung.

Email-Kompatibilität

Die Unterstützung von caption in Email-Clients ist gemischt. Einige Clients zeigen es korrekt an, andere ignorieren es. Für E-Mails empfiehlt sich ein separater Text über der Tabelle.

Verwandte Elemente