<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 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 enthält die globalen Attribute.

Veraltete Attribute

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

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 stattdessen die CSS-Eigenschaften caption-side und text-align, da dieses Attribut veraltet ist.

Anwendungshinweise

  • Wenn enthalten, muss das <caption>-Element das erste Kind seines übergeordneten <table>-Elements sein.
  • Wenn eine <table> innerhalb eines <figure> verschachtelt ist und den einzigen Inhalt der Figur darstellt, sollte sie mittels eines <figcaption> für die <figure> und nicht als <caption> innerhalb der <table> beschriftet werden.
  • Jeder angewendete background-color auf eine Tabelle wird nicht auf deren Beschriftung angewendet. Fügen Sie dem <caption>-Element ebenfalls eine background-color hinzu, wenn Sie die gleiche Farbe hinter beiden haben möchten.

Beispiel

Sehen Sie sich <table> für ein vollständiges Tabellenbeispiel an, das allgemeine Standards und bewährte Praktiken einführt.

Tabelle mit Beschriftung

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

Ein solcher "Titel" ist nützlich für Benutzer, die die Seite schnell scannen, und besonders vorteilhaft für sehbehinderte Benutzer, da er ihnen ermöglicht, schnell die Relevanz der Tabelle zu bestimmen, ohne dass ein Screenreader den Inhalt vieler Zellen lesen muss, nur um zu erfahren, worum es in der Tabelle geht.

HTML

Ein <caption>-Element wird als das erste Kind der <table> verwendet, mit einem Textinhalt ähnlich einem Titel, um die Tabellendaten zu beschreiben. Drei Zeilen, die erste eine Kopfzeile, mit zwei Spalten werden nach der <caption> unter Nutzung der <tr>, <th> und <td>-Elemente 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 Eigenschaften 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.
Erlaubte Inhalte Fließender Inhalt.
Verzicht auf Tag Das End-Tag kann weggelassen werden, wenn das Element nicht direkt von ASCII-Leerraum oder einem Kommentar gefolgt wird.
Erlaubte Eltern Ein <table>-Element, als dessen erstes Nachfolgeelement.
Implizite ARIA-Rolle caption
Zulässige ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLTableCaptionElement`](/de/docs/Web/API/HTMLTableCaptionElement)

Spezifikationen

Specification
HTML
# the-caption-element

Browser-Kompatibilität

Siehe auch