<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> HTML-Element spezifiziert die Beschriftung (oder den Titel) einer Tabelle und bietet der Tabelle eine zugängliche 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;
  text-shadow:
    1px 1px 1px #fff,
    2px 2px 1px #000;
}

.skeletor {
  font: 1.7rem rapscallion;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 #fff,
    0 0 9px #000;
}

Attribute

Dieses Element umfasst die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten zur Referenz aufgeführt, um bestehenden Code zu aktualisieren oder aus historischem Interesse.

align

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

Nutzungshinweise

  • Wenn enthalten, muss das <caption>-Element das erste Kind seines übergeordneten <table>-Elements sein.
  • Wenn eine <table> innerhalb eines <figure> als einziger Inhalt des Figures genestet ist, sollte sie über ein <figcaption> für das <figure> anstelle eines innerhalb der <table> verschachtelten <caption> beschriftet werden.
  • Jede background-color, die auf eine Tabelle angewendet wird, wird nicht auf ihre Beschriftung angewendet. Fügen Sie auch dem <caption>-Element eine background-color hinzu, wenn dieselbe Farbe hinter beiden sein soll.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel, das allgemeine Standards und bewährte Praktiken vorstellt.

Tabelle mit Beschriftung

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

Ein solcher "Titel" ist hilfreich für Benutzer, die die Seite schnell durchsuchen, und besonders vorteilhaft für sehbehinderte Benutzer, da sie so schnell die Relevanz der Tabelle bestimmen können, ohne das Inhalts einer Vielzahl von Zellen von einem Screenreader lesen lassen zu müssen, nur um zu erfahren, worum es in der Tabelle geht.

HTML

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

Ein wenig grundlegendes CSS wird 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 Flussinhalt.
Tag-Auslassung Das End-Tag kann weggelassen werden, wenn das Element nicht direkt von ASCII-Leerzeichen oder einem Kommentar gefolgt wird.
Erlaubte Eltern Ein <table>-Element, als dessen 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