caption-side

Die CSS Eigenschaft caption-side positioniert den Inhalt einer <caption> einer Tabelle auf der angegebenen Seite.

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 This API has not been standardized.
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 This API has not been standardized.
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 This API has not been standardized.
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 This API has not been standardized.
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

Initialwerttop
Anwendbar auftable-caption Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

top | bottom | block-start | block-end | inline-start | inline-end

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