caption-side

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.

/* 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.

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

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

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