CSS caption-side Eigenschaft

Die Eigenschaft caption-side legt die Position des HTML-Elements <caption> innerhalb einer HTML-Tabelle fest. Das Tag <caption> wird verwendet, um einer Tabelle einen Titel zu geben. Der Titel (die Beschriftung) der Tabelle kann entweder unterhalb oder oberhalb der Tabelle platziert werden.

Diese Eigenschaft hat zwei standardisierte Werte: top und bottom. Der Wert top legt fest, dass das Beschriftungsfeld oberhalb der Tabelle angezeigt wird. Der Wert bottom legt fest, dass das Beschriftungsfeld unterhalb der Tabelle angezeigt wird.

Es gibt vier weitere nicht standardisierte Werte: left, right, top-outside und bottom-outside. Diese Werte wurden in CSS 2 vorgeschlagen, aber nicht in CSS 2.1 aufgenommen. Sie sind derzeit veraltet und werden nur von Firefox unterstützt. Für den produktiven Einsatz werden sie nicht empfohlen.

Die Eigenschaft caption-side kann auch auf jedes Element angewendet werden, dessen Eigenschaft display auf table-caption gesetzt ist.

Anfangswert	top
Gilt für	Tabellenbeschriftungselemente.
Vererbbar	Nein.
Animierbar	Diskret.
Version	CSS 2.1
DOM-Syntax	object.style.captionSide = "top";

Die caption-side-Eigenschaft für eine Tabellenbeschriftung

Verwenden Sie eine Tabellenbeschriftung, um der Tabelle eine kurze Überschrift zu geben – etwa eine kurze Beschreibung der Tabellenstruktur. Das Element <caption> sollte zu diesem Zweck genutzt werden. Es muss unmittelbar nach dem öffnenden Tag <table> eingefügt werden und ist damit das erste Kind der Tabelle. (Hinweis: Das Attribut summary am Tag <table> ist in HTML5 veraltet und sollte nicht mehr verwendet werden.) Mit der Eigenschaft caption-side lässt sich die Position der Beschriftung ändern.

Syntax

Syntax der CSS-Eigenschaft caption-side

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

Hier ist ein Beispiel, bei dem der Wert „top" angewendet wird. Er platziert die Beschriftung oberhalb der Tabelle.

Beispiel der CSS-Eigenschaft caption-side:

Beispiel der CSS-Eigenschaft caption-side mit dem Wert top

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS caption-side Eigenschaft](/uploads/media/default/0001/03/273b1e51c9d5a4a9ee88f0aa85c7a0958ae2d787.png "CSS caption-side property with top value" =420x)

Beispiel der caption-side-Eigenschaft mit zwei Werten:

Beispiel der CSS-Eigenschaft caption-side mit den Werten top und bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
    <br />
    <p>And here the caption-side is set to "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Probier es selbst »

Wann sollte caption-side verwendet werden?

Standardmäßig erscheint die Beschriftung oberhalb der Tabelle (caption-side: top), was die übliche Position für einen Tabellentitel ist. Setzen Sie den Wert auf bottom, wenn die Beschriftung eher wie eine Fußnote oder eine Quellenangabe wirkt – zum Beispiel „Abbildung 1: Quartalsumsatz (in Tausend)" unterhalb einer diagrammähnlichen Tabelle. Die Entscheidung ist rein visueller Natur; das Element <caption> bleibt im Markup stets das erste Kind der Tabelle, sodass Screenreader es unabhängig von seiner dargestellten Position als zugänglichen Namen der Tabelle ankündigen.

Wichtige Hinweise

Die Position im Markup ist fest, die Darstellung nicht. Auch wenn Sie caption-side: bottom verwenden, muss <caption> das erste Kind von <table> bleiben. CSS verschiebt nur, wo das Box gezeichnet wird, nicht wo das Element im DOM liegt.
Verwenden Sie nur top und bottom. Die Werte left, right, top-outside und bottom-outside wurden aus CSS 2.1 entfernt und werden nur in Firefox berücksichtigt. In allen anderen Browsern werden sie ignoriert und auf top zurückgesetzt – vermeiden Sie sie daher in der Produktion.
Die Eigenschaft wird nicht vererbt. Obwohl die Eigenschaft auf Tabellenbeschriftungsboxen angewendet wird, ist sie nicht vererbbar. Das Setzen auf einem übergeordneten Element wirkt sich nicht auf verschachtelte Tabellen aus, sofern deren Beschriftungen nicht direkt angesteuert werden.
Kein eigenes Layout-Feld für die Größenangabe. Mit caption-side lässt sich weder die Breite noch die Textausrichtung der Beschriftung ändern – verwenden Sie dafür text-align und width am <caption>-Element.

Browser-Unterstützung

Die standardisierten Werte top und bottom werden von allen modernen Browsern unterstützt, einschließlich Internet Explorer 8 und höher. Die nicht standardisierten Werte werden nur von Firefox unterstützt.

Werte

Wert	Beschreibung	Ausprobieren
top	Platziert die Beschriftung oberhalb der Tabelle. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
bottom	Platziert die Beschriftung unterhalb der Tabelle.	Ausprobieren »
left	Platziert die Beschriftung links neben der Tabelle. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird.
right	Platziert die Beschriftung rechts neben der Tabelle. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird.
top-outside	Platziert die Beschriftung oberhalb der Tabelle. Breite und horizontale Ausrichtung sind nicht an das horizontale Layout der Tabelle gebunden. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird.
bottom-outside	Platziert die Beschriftung unterhalb der Tabelle, wobei Breite und horizontale Ausrichtung nicht an das horizontale Layout der Tabelle gebunden sind. Ein nicht standardisierter Wert, der nur von Firefox unterstützt wird.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was bewirkt die Eigenschaft 'caption-side' in CSS?

Sie legt die Position der Beschriftung oberhalb der Tabelle fest.Sie legt die Position der Beschriftung unterhalb der Tabelle fest.Sie gestaltet die Beschriftung mit einer bestimmten Schriftfarbe.Sie vergrößert die Schriftgröße der Beschriftung.