| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/caption | [Back] [Original] |
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.
<caption> HTML-Tabellenberschrift-ElementDiese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.
* Einige Teile dieser Funktion werden mglicherweise unterschiedlich gut untersttzt.
Das <caption>-Element HTML spezifiziert die berschrift (oder den Titel) einer Tabelle und gibt der Tabelle einen zugnglichen Namen oder eine zugngliche Beschreibung.
<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;
}
Dieses Element enthlt die globalen 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 mglichen enumerierten Werte sind left, top, right oder bottom. Verwenden Sie stattdessen die CSS-Eigenschaften caption-side und text-align, da dieses Attribut veraltet ist.
<caption>-Element das erste Kind seines bergeordneten <table>-Elements sein.<table> in einem <figure> als einziger Inhalt des Figures geschachtelt ist, sollte sie ber ein <figcaption> fr das <figure> beschriftet werden, anstatt als <caption> innerhalb der <table>.background-color wird nicht auf ihre berschrift angewandt. Fgen Sie auch dem <caption>-Element eine background-color hinzu, wenn Sie dieselbe Farbe hinter beiden haben mchten.Siehe <table> fr ein vollstndiges Tabellenbeispiel, das gngige Standards und bewhrte Verfahren einfhrt.
Dieses Beispiel zeigt eine einfache Tabelle, die eine berschrift enthlt, die die prsentierten Daten beschreibt.
Ein solcher "Titel" ist hilfreich fr Benutzer, die die Seite schnell berfliegen, und er ist besonders vorteilhaft fr sehbehinderte Benutzer, da er ihnen ermglicht, 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.
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.
<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>
Ein einfaches 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;
}
| Inhaltskategorien | Keine. |
|---|---|
| Erlaubter Inhalt | Flieender Inhalt. |
| Tag-Auslassung | Der Endtag kann weggelassen werden, wenn das Element nicht unmittelbar von ASCII-Leerraum oder einem Kommentar gefolgt wird. |
| Erlaubte Eltern |
Ein <table>-Element, als sein erstes Nachkommens-Element.
|
| Implizierte ARIA-Rolle |
caption
|
| Erlaubte ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLTableCaptionElement`](/de/docs/Web/API/HTMLTableCaptionElement) |
| Spezifikation |
|---|
| HTML # the-caption-element |
<col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenverwandte Elementecaption-side: CSS-Eigenschaft, um das <caption> relativ zu seinem bergeordneten <table> zu positionierentext-align: CSS-Eigenschaft, um den Textinhalt des <caption> horizontal auszurichten<a><abbr><acronym><address><area><article><aside><audio><b><base><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fencedframe><fieldset><figcaption><figure><font><footer><form><frame><frameset><geolocation><h1><h6><head><header><hgroup><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><marquee><menu><meta><meter><nav><nobr><noembed><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><plaintext><pre><progress><q><rb><rp><rt><rtc><ruby><s><samp><script><search><section><select><selectedcontent><slot><small><source><span><strike><strong><style><sub><summary><sup><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video><wbr><xmp><input>-Typen<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image">`<input type="month">`<input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week"><script type>Der Bauplan fr ein besseres Internet.
Teile dieses Inhalts sind 19982026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfgbar unter einer Creative-Commons-Lizenz.
| Web Proxy Viewer | New URL | Original Page |