<caption>: Das Tabellenüberschriftselement
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Das <caption>
-HTML-Element spezifiziert die Beschriftung (oder den Titel) einer Tabelle und gibt der Tabelle einen zugänglichen Namen oder 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",
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 hier dokumentiert, um bei der Aktualisierung vorhandenen 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 aufgezählten Werte sind
left
,top
,right
oderbottom
. Verwenden Sie stattdessen diecaption-side
- undtext-align
-CSS-Eigenschaften, da dieses Attribut veraltet ist.
Nutzungshinweise
- Wenn eingeschlossen, muss das
<caption>
-Element das erste Kind seines übergeordneten<table>
-Elements sein. - Wenn eine
<table>
innerhalb einer<figure>
als einziges Inhaltselement geschachtelt ist, sollte sie über eine<figcaption>
für die<figure>
beschriftet werden, anstatt als ein innerhalb der<table>
geschachteltes<caption>
. - Jede auf eine Tabelle angewendete
background-color
wird nicht auf deren Beschriftung angewendet. Fügen Sie dem<caption>
-Element ebenfalls einebackground-color
hinzu, wenn Sie möchten, dass dieselbe Farbe hinter beiden erscheint.
Beispiel
Siehe <table>
für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Verfahren 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 hilfreich für Benutzer, die die Seite schnell scannen, und es ist besonders vorteilhaft für sehbehinderte Benutzer, da sie so die Relevanz der Tabelle schnell erkennen können, ohne dass ein Bildschirmlesegerät 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>
-Elements verwendet, mit einem Textinhalt ähnlich einem Titel, um die Tabellendaten zu beschreiben. Nach dem <caption>
werden drei Zeilen, die erste ist eine Kopfzeile, mit zwei Spalten unter Verwendung der <tr>
, <th>
und <td>
-Elemente 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-Stile werden verwendet, um die <caption>
auszurichten und hervorzuheben.
caption {
caption-side: top;
text-align: left;
padding-bottom: 10px;
font-weight: bold;
}
Ergebnis
Technische Zusammenfassung
Inhaltskategorien | Keine. |
---|---|
Erlaubter Inhalt | Flow-Inhalt. |
Weglassung des Tags | Das End-Tag kann weggelassen werden, wenn das Element nicht unmittelbar von ASCII-Leerzeichen oder einem Kommentar gefolgt wird. |
Erlaubte Elternteile |
Ein <table> -Element, als erster Nachfahre.
|
Implizite ARIA-Rolle |
caption
|
Erlaubte ARIA-Rollen | Keine role erlaubt |
DOM-Interface | [`HTMLTableCaptionElement`](/de/docs/Web/API/HTMLTableCaptionElement) |
Spezifikationen
Specification |
---|
HTML> # the-caption-element> |
Browser-Kompatibilität
Loading…
Siehe auch
- Lernen: Grundlagen der HTML-Tabellen
<col>
,<colgroup>
,<table>
,<tbody>
,<td>
,<tfoot>
,<th>
,<thead>
,<tr>
: Andere tabellenbezogene Elementecaption-side
: CSS-Eigenschaft, um das<caption>
relativ zu seinem übergeordneten<table>
zu positionierentext-align
: CSS-Eigenschaft, um den Textinhalt des<caption>
horizontal auszurichten