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

Das <caption> HTML-Element gibt die Beschriftung (oder den Titel) einer Tabelle an 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 hier zur Referenz bei der Aktualisierung vorhandenen Codes und aus historischem Interesse dokumentiert.

align

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

Verwendungshinweise

  • Wenn enthalten, muss das <caption>-Element das erste Kind seines übergeordneten <table>-Elements sein.
  • Wenn eine <table> innerhalb einer <figure> als einziger Inhalt der Abbildung geschachtelt ist, sollte sie über eine <figcaption> für das <figure> und nicht als <caption>, das innerhalb der <table> geschachtelt ist, beschriftet werden.
  • Jegliche background-color, die auf eine Tabelle angewendet wird, wird nicht auf deren Beschriftung angewendet. Fügen Sie der <caption>-Element ebenfalls eine background-color hinzu, wenn Sie dieselbe Farbe sowohl hinter der Tabelle als auch hinter der Beschriftung wünschen.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Praktiken einführt.

Tabelle mit Beschriftung

Dieses Beispiel zeigt eine einfache Tabelle, die eine Beschriftung enthält, um die dargestellten Daten zu beschreiben.

Ein solcher "Titel" ist hilfreich für Benutzer, die die Seite schnell durchsuchen, und er ist besonders vorteilhaft für sehbehinderte Benutzer, da er ihnen ermöglicht, die Relevanz der Tabelle schnell zu bestimmen, ohne dass ein Screenreader 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 einem Textinhalt ähnlich einem Titel, um die Tabellendaten zu beschreiben. Drei Zeilen, die erste als Kopfzeile, mit zwei Spalten werden nach dem <caption> unter Verwendung der Elemente <tr>, <th> und <td> 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 bisschen 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 Flow-Inhalt.
Tag-Auslassung Das End-Tag kann weggelassen werden, wenn das Element nicht unmittelbar von ASCII-Leerzeichen oder einem Kommentar gefolgt wird.
Erlaubte Eltern Ein <table>-Element, als dessen erster Nachkomme.
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

BCD tables only load in the browser

Siehe auch