CSS caption-side-Eigenschaft
Die caption-side-Eigenschaft definiert die Platzierung des HTML-<caption>-Elements innerhalb einer HTML-Tabelle. Das <caption>-Tag wird verwendet, um einer Tabelle einen Titel zu geben. Der Titel (Caption) der Tabelle kann unten oder oben an der Tabelle platziert werden.
Diese Eigenschaft hat zwei standardisierte Werte: top und bottom. Der Wert top definiert, dass die Caption-Box über der Tabelle platziert werden soll. Der Wert bottom definiert, dass die Caption-Box unter der Tabelle platziert werden soll.
Es gibt vier weitere Werte, die nicht standardisiert sind: left, right, top-outside und bottom-outside. Diese Werte wurden in CSS 2 vorgeschlagen, aber nicht in CSS 2.1 aufgenommen. Sie sind derzeit veraltet und werden nur von Firefox unterstützt. Sie werden nicht für den produktiven Einsatz empfohlen.
Die caption-side-Eigenschaft kann auch auf jedes Element angewendet werden, dessen display-Eigenschaft auf table-caption gesetzt ist.
| Anfangswert | top |
|---|---|
| Gilt für | Table-caption-Elemente. |
| Vererbt | Nein. |
| Animierbar | Diskret. |
| Version | CSS 2.1 |
| DOM-Syntax | object.style.captionSide = "top"; |
caption-side-Eigenschaft für einen Tabellen-Caption
Verwenden Sie einen Tabellen-Caption, um der Tabelle eine kurze Überschrift oder eine kurze Beschreibung zu geben. Dies beschreibt die Struktur der Tabelle. Hierfür sollte das <caption>-Element verwendet werden. Es muss direkt nach dem öffnenden <table>-Tag platziert werden, wodurch es zum ersten Kind der Tabelle wird. (Hinweis: Das summary-Attribut im <table>-Tag ist in HTML5 veraltet und sollte nicht verwendet werden.) Mit Hilfe der caption-side-Eigenschaft können Sie die Position des Captions ändern.
Syntax
Syntax der CSS caption-side-Eigenschaft
caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;Hier ist ein Beispiel, in dem der Wert „top“ angewendet wird. Er platziert den Caption über der Tabelle.
Beispiel für die CSS caption-side-Eigenschaft:
Beispiel der CSS caption-side-Eigenschaft mit top-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
}
.top caption {
caption-side: top;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #ccc;
color: #666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "top":</p>
<table class="top">
<caption>Some title here</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>Ergebnis
Beispiel der caption-side-Eigenschaft mit zwei Werten:
Beispiel der CSS caption-side-Eigenschaft mit top- und bottom-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #ccc;
}
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #cccccc;
padding: 3px;
}
td {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "top":</p>
<table class="top">
<caption>ABOVE</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
<br />
<p>Here the caption-side is set to "bottom":</p>
<table class="bottom">
<caption>BELOW</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| top | Platziert den Caption über der Tabelle. Dies ist der Standardwert dieser Eigenschaft. | Testen » |
| bottom | Platziert den Caption unter der Tabelle. | Testen » |
| left | Platziert den Caption auf der linken Seite der Tabelle. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird. | |
| right | Platziert den Caption auf der rechten Seite der Tabelle. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird. | |
| top-outside | Platziert den Caption über der Tabelle. Die Breite und das Verhalten der horizontalen Ausrichtung sind nicht an das horizontale Layout der Tabelle gebunden. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird. | |
| bottom-outside | Platziert den Caption unter der Tabelle, wobei die Breite und das Verhalten der horizontalen Ausrichtung nicht an das horizontale Layout der Tabelle gebunden sind. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was bewirkt die 'caption-side'-Eigenschaft in CSS?