<caption>

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.

Steckbrief <caption>

Kategorie: Tabellen
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 04.02.2026

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

index.html

Grundsyntax

<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

3 Beispiele

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.

index.html

Gestylte Caption

<table>
  <caption style="text-align: left; font-weight: bold;
    font-size: 1.1em; padding: 10px 0;">
    Monatliche Ausgaben im 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>

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

index.html

Caption unterhalb

<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>

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

index.html

Caption mit Beschreibung

<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

4 Fehler

01 <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.

02 <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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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.

Apple Mail

Komplett
Gmail

Teilweise

caption wird angezeigt, aber caption-side: bottom wird ignoriert. Die Caption erscheint immer über der Tabelle.
Outlook

Teilweise

Outlook zeigt caption an, aber das Styling kann eingeschränkt sein. Für Rechnungs-E-Mails empfiehlt sich ein separater Text.
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende Darstellung funktioniert, aber caption-side wird nicht unterstützt.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<caption>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter