<caption>: Das Tabellenbeschriftungselement

Dieses Element umfasst die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten zur Referenz 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 caption-side und text-align CSS-Eigenschaften, da dieses Attribut veraltet ist.

• Wenn das <caption> Element enthalten ist, muss es das erste Kind des übergeordneten <table> Elements sein.
• Wenn eine <table> innerhalb eines <figure> als einziger Inhalt geschachtelt ist, sollte sie über eine <figcaption> für das <figure> beschriftet werden, anstatt als ein <caption> innerhalb der <table>.
• Jeder angewendete background-color einer Tabelle wird nicht auf deren Beschriftung angewendet. Fügen Sie dem <caption> Element ebenfalls eine background-color hinzu, wenn Sie dieselbe Farbe hinter beiden haben möchten.

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

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

Ein solcher "Titel" ist für Benutzer hilfreich, die die Seite schnell überfliegen. Er ist besonders vorteilhaft für sehbeeinträchtigte Nutzer, da er ihnen ermöglicht, schnell die Relevanz der Tabelle festzustellen, ohne dass ein Screenreader die Inhalte vieler Zellen lesen muss, nur um zu erfahren, worum es in der Tabelle geht.

HTML

Ein <caption> Element wird als erstes Kind der <table> verwendet, mit einem Textinhalt, der einem Titel ähnelt, um die Tabellendaten zu beschreiben. Drei Zeilen, wobei die erste eine Kopfzeile mit zwei Spalten ist, werden unter Verwendung der <tr>, <th> und <td> Elemente 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-Anweisungen werden 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: Grundlagen von HTML-Tabellen
• <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene 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