Die CSS Eigenschaft caption-side
positioniert den Inhalt einer <caption>
einer Tabelle auf der angegebenen Seite.
Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.
Syntax
/* Directional values */
caption-side: top;
caption-side: bottom;
/* Warning: non-standard values */
caption-side: left;
caption-side: right;
caption-side: top-outside;
caption-side: bottom-outside;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: unset;
Die Eigenschaft caption-side
property wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
Werte
top
- Die Überschriftenbox soll oberhalb der Tabelle positioniert werden.
bottom
- Die Überschriftenbox soll unterhalb der Tabelle positioniert werden.
left
- Die Überschriftenbox soll links von der Tabelle positioniert werden.
-
Hinweis: Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.
right
- Die Überschriftenbox soll rechts von der Tabelle positioniert werden.
-
Hinweis: Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.
top-outside
- Das Überschriftenbox sollte oberhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.
-
Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den
top
Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird. bottom-outside
- Das Überschriftenbox sollte unterhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.
-
Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den
bottom
Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird
Formale Definition
Initialwert | top |
---|---|
Anwendbar auf | table-caption Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Setzen von Beschriftungen oben und unten
HTML
<table class="top">
<caption>Caption ABOVE the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
<br>
<table class="bottom">
<caption>Caption BELOW the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
CSS
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
Ergebnis
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Logical Properties and Values Level 1 Die Definition von 'caption-side' in dieser Spezifikation. |
Bearbeiterentwurf | Definiert die oberen top und unteren bottom Werte relativ zum Schreibmodus writing-mode Wert. |
CSS Level 2 (Revision 1) Die Definition von 'caption-side' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
BCD tables only load in the browser
Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.