CSS-Eigenschaft caption-side

Die Eigenschaft caption-side definiert die Position des HTML Elements <caption> , das in HTML-Tabellen verwendet wird. Das Tag <caption> wird verwendet, um einen Titel für eine Tabelle zu vergeben. Der Titel (caption) der Tabelle kann unten oder oben auf der Tabelle platziert werden.

Die Eigenschaft caption-side hat zwei standardisierte Werte: top und bottom. Der Wert "top" definiert, dass das Titelfeld über der Tabelle platziert werden soll. Der Wert "bottom" definiert, dass Captionsfeld unter der Tabelle platziert werden soll.

Es gibt vier weitere Werte, die nicht standardisiert sind: left, right, top-outside und bottom-outside. Diese vier Werte wurden in CSS 2 vorgeschlagen, aber nicht in der CSS 2.1 Spezifikation eingeschlossen.

Die Eigenschaft caption-side kann auch für jedes Element, dessen display auf "caption-side" eingestellt ist, gelten.

Anfangswert top
Gilt für Table-caption-Elemente.
Geerbt Ja.
Animierbar Diskret
Version CSS3
DOM Syntax object.style.captionSide = "top";

Syntax

caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;

Hier ist ein Beispiel mit dem Wert "top". Es legt die Beschriftung (caption) über das Beschriftungsfeld.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für die Eigenschaft caption-side</h2>
    <p>Hier ist caption-side auf "top" eingestellt:</p>
    <table class="top">
      <caption>Irgendeine Überschrift</caption>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </table>
  </body>
</html>

In diesem Beispiel finden Sie den Unterschied der beiden Werte.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für die Eigenschaft caption-side</h2>
    <p>Hier ist caption-side auf "top" eingestellt:</p>
    <table class="top">
      <caption>OBENE</caption>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </table>
    <br>
    <p>Hier ist caption-side auf "bottom" eingestellt:</p>
    <table class="bottom">
      <caption>UNTEN</caption>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </table>
  </body>
</html>

Werte

Wert Beschreibung
top Es platziert die Überschrift über dem Tisch. Das ist der Standardwert dieser Eigenschaft.
bottom Es platziert die Überschrift unter der Tabelle.
left Es platziert die Überschrift auf der linken Seite der Tabelle.
right Es platziert die Überschrift auf der rechten Seite der Tabelle.
top-outside Es platziert die Überschrift über der Tabelle. Die Breite und das horizontale Ausrichtungsverhalten sind nicht an das horizontale Layout der Tabelle gebunden.
bottom-outside Es platziert die Überschrift unterhalb der Tabelle, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 4.0+

Übe dein Wissen

Welche Werte nimmt die CSS-Eigenschaft 'caption-side' an?
Finden Sie das nützlich?