caption-side

Try it

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 Non-Standard
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.
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 Non-Standard
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 Non-Standard
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