<caption>: Das Tabellenbeschriftungselement

Dieses Element umfasst die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um beim Aktualisieren bestehenden Codes als Referenz zu dienen und aus historischem Interesse.

align Veraltet

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

• 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 über eine <figcaption> für die <figure> anstelle als <caption> innerhalb der <table> beschriftet werden.
• Jede background-color, die auf eine Tabelle angewendet wird, gilt nicht für deren Beschriftung. Fügen Sie eine background-color zum <caption>-Element hinzu, wenn Sie möchten, dass dieselbe Farbe auch hinter der Beschriftung angezeigt wird.

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

Dieses Beispiel zeigt eine einfache Tabelle mit einer Beschriftung, die die dargestellten 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 erlaubt, schnell die Relevanz der Tabelle zu erkennen, ohne dass ein Screenreader den Inhalt vieler Zellen vorlesen muss, nur um zu erfahren, 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 davon eine Kopfzeile, mit zwei Spalten werden mit den <tr>, <th> und <td>-Elementen nach dem <caption> erstellt.

<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 die <caption> auszurichten und hervorzuheben.

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

• Lernen: Grundlagen von HTML-Tabellen
• <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• caption-side: CSS-Eigenschaft, um die <caption> relativ zu ihrem übergeordneten <table> zu positionieren
• text-align: CSS-Eigenschaft, um den Textinhalt der <caption> horizontal auszurichten