<caption>: Das Tabellenbeschriftungselement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <caption>-Element von HTML gibt die Beschriftung (oder den Titel) einer Tabelle an und bietet der Tabelle eine barrierefreie Beschreibung.

Probieren Sie es aus

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tr>
    <td></td>
    <th scope="col" class="heman">He-Man</th>
    <th scope="col" class="skeletor">Skeletor</th>
  </tr>
  <tr>
    <th scope="row">Role</th>
    <td>Hero</td>
    <td>Villain</td>
  </tr>
  <tr>
    <th scope="row">Weapon</th>
    <td>Power Sword</td>
    <td>Havoc Staff</td>
  </tr>
  <tr>
    <th scope="row">Dark secret</th>
    <td>Expert florist</td>
    <td>Cries at romcoms</td>
  </tr>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font:
    1.4rem molot,
    sans-serif;
  text-shadow:
    1px 1px 1px white,
    2px 2px 1px black;
}

.skeletor {
  font:
    1.7rem rapscallion,
    fantasy;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 white,
    0 0 9px black;
}

Attribute

Dieses Element enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier nur zur Referenz beim Aktualisieren bestehenden Codes und aus historischem Interesse dokumentiert.

align

Gibt an, auf welcher Seite der Tabelle die Beschriftung angezeigt werden soll. Die möglichen enumerierten Werte sind left, top, right oder bottom. Verwenden Sie stattdessen die CSS-Eigenschaften caption-side und text-align, da dieses Attribut veraltet ist.

Hinweise zur Nutzung

  • Falls vorhanden, muss das <caption>-Element das erste Kind seines übergeordneten <table>-Elements sein.
  • Wenn eine <table> innerhalb eines <figure> als einzigem Inhalt der Figur verschachtelt ist, sollte sie stattdessen über eine <figcaption> für die <figure> und nicht als <caption> innerhalb der <table> beschriftet werden.
  • Jede angewendete background-color auf eine Tabelle wird nicht auf ihre Beschriftung angewendet. Fügen Sie auch dem <caption>-Element eine background-color hinzu, wenn Sie möchten, dass hinter beiden die gleiche Farbe erscheint.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices vorstellt.

Tabelle mit Beschriftung

Dieses Beispiel zeigt eine einfache Tabelle, die eine Beschriftung enthält, die die dargestellten Daten beschreibt.

Ein solcher "Titel" ist hilfreich für Benutzer, die die Seite schnell durchsehen, und ist besonders vorteilhaft für sehbehinderte Benutzer, da es ihnen ermöglicht, die Relevanz der Tabelle schnell zu bestimmen, ohne dass ein Bildschirmlesegerät den Inhalt vieler Zellen lesen muss, nur um herauszufinden, worum es in der Tabelle geht.

HTML

Ein <caption>-Element wird als erstes Kind der <table> verwendet, mit Textinhalt ähnlich einem Titel, um die Tabellendaten zu beschreiben. Drei Zeilen, die erste als Kopfzeile, mit zwei Spalten werden mit den Elementen <tr>, <th> und <td> nach dem <caption> erstellt.

html
<table>
  <caption>
    User login email addresses
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@example.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@example.com</td>
  </tr>
</table>

CSS

Einige grundlegende CSS werden verwendet, um das <caption> auszurichten und hervorzuheben.

css
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Keine.
Erlaubter Inhalt Flow-Inhalt.
Tag-Auslassung Das End-Tag kann ausgelassen werden, wenn das Element nicht direkt gefolgt wird von ASCII-Leerzeichen oder einem Kommentar.
Erlaubte Eltern Ein <table>-Element, als sein erstes Nachkommenelement.
Implizierte ARIA-Rolle caption
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLTableCaptionElement`](/de/docs/Web/API/HTMLTableCaptionElement)

Spezifikationen

Specification
HTML
# the-caption-element

Browser-Kompatibilität

Siehe auch