<caption>: Das Tabellenbeschriftungselement

Dieses Element umfasst die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind im Folgenden aus Referenzgründen bei der Aktualisierung bestehender Codes und aus historischem Interesse dokumentiert.

align Veraltet

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

• Wenn enthalten, muss das <caption>-Element das erste Kind seines übergeordneten <table>-Elements sein.
• Wenn eine <table> innerhalb eines <figure> als einzigem Inhalt der Figur eingebettet ist, sollte sie stattdessen über ein <figcaption> für das <figure> und nicht als <caption> innerhalb der <table> beschriftet werden.
• Jede auf eine Tabelle angewendete background-color wird nicht auf deren Beschriftung angewendet. Fügen Sie dem <caption>-Element ebenfalls eine background-color hinzu, wenn Sie möchten, dass dieselbe Farbe hinter beiden erscheint.

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices vorstellt.

Dieses Beispiel zeigt eine einfache Tabelle, die eine Beschriftung enthält, 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 ermöglicht, die Relevanz der Tabelle schnell zu bestimmen, ohne dass ein Bildschirmleser 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 als Kopfzeile, mit zwei Spalten werden mit den Elementen <tr>, <th> und <td> 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 wird verwendet, um das <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: 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