CSS-Eigenschaft caption-side

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.


1.0+	12.0+	1.0+	1.0+	4.0+

1.0+

12.0+

1.0+

4.0+

CSS-Eigenschaft caption-side

Syntax

Beispiel

Beispiel

Werte

Browser-Support

Übe dein Wissen