<caption> HTML-Tabellenüberschrift-Element - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<caption> HTML-Tabellenüberschrift-Element

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das <caption>-Element HTML spezifiziert die Überschrift (oder den Titel) einer Tabelle und gibt der Tabelle einen zugänglichen Namen oder eine zugängliche Beschreibung.

In diesem Artikel

Probieren Sie es aus

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tbody>
    <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>
  </tbody>
</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 sind unten dokumentiert, um beim Aktualisieren bestehender Codes als Referenz zu dienen und aus historischem Interesse.

align

Gibt an, auf welcher Seite der Tabelle die Überschrift 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.

Nutzungshinweise

Wenn eingefügt, muss das <caption>-Element das erste Kind seines übergeordneten <table>-Elements sein.
Wenn eine <table> in einem <figure> als einziger Inhalt des Figures geschachtelt ist, sollte sie über ein <figcaption> für das <figure> beschriftet werden, anstatt als <caption> innerhalb der <table>.
Jede auf eine Tabelle angewandte background-color wird nicht auf ihre Überschrift angewandt. Fügen Sie auch dem <caption>-Element eine background-color hinzu, wenn Sie dieselbe Farbe hinter beiden haben möchten.

Beispiel

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

Tabelle mit Überschrift

Dieses Beispiel zeigt eine einfache Tabelle, die eine Überschrift enthält, die die präsentierten Daten beschreibt.

Ein solcher "Titel" ist hilfreich für Benutzer, die die Seite schnell überfliegen, und er ist 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 herauszufinden, worum es in der Tabelle geht.

HTML

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

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

CSS

Ein einfaches CSS wird verwendet, um das <caption> auszurichten und hervorzuheben.

css
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 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;
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Keine.

Fließender Inhalt.

Der Endtag kann weggelassen werden, wenn das Element nicht unmittelbar von ASCII-Leerraum oder einem Kommentar gefolgt wird.

Ein <table>-Element, als sein erstes Nachkommens-Element.

caption

Keine role erlaubt

[`HTMLTableCaptionElement`](/de/docs/Web/API/HTMLTableCaptionElement)

Lernen: HTML-Tabellen-Grundlagen
<col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenverwandte Elemente
caption-side: CSS-Eigenschaft, um das <caption> relativ zu seinem übergeordneten <table> zu positionieren
text-align: CSS-Eigenschaft, um den Textinhalt des <caption> horizontal auszurichten

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden