The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Referenz
  3. caption-side

CSS 2.1 · Eigenschaft

CSS-Eigenschaft caption-side

Vollreferenz zu caption-side: erlaubte Werte, Ausgangswert, Vererbung, Beispiel – und ein Regler, der zeigt, was die Eigenschaft tut.

Erstveröffentlichung Lesezeit 4 min
stylesheet.css · caption-side
.probe {
  caption-side: bottom;
}
Tabellenüberschrift
EigenschaftWert
margin24px
padding16px
berechneter Wertcaption-side: bottom
Box-Breite–
Box-Höhe–

Erläuterungen

Die Eigenschaft caption-side dient der Positionierung einer Tabellenüber- bzw. -unterschrift. Diese kann entweder durch das Element caption oder durch display:table-caption in einem beliebigen Element definiert sein.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'caption-side'
top | bottom | inherit
top (Ausgangswert), bottom
caption-Elemente vor oder nach table-Elementen werden wie eigenständige Block- Level- Elemente über oder unter Tabellen formatiert. Von dieser Regel gibt es zwei Ausnahmen:
  1. Sie übernehmen alle vererbbaren Eigenschaften aus der zugehörigen Tabelle.
  2. compact- oder run-in-Elemente, die der Tabelle direkt vorausgehen, integrieren sich nicht in caption-Elemente so wie in gewöhnliche Block- Level- Elemente.
Die Breite eines caption-Elementes berechnet sich genauso wie die Breite eines Block- Level- Elementes abhängig von der Breite des umschließenden Elements. Text innerhalb der Tabbellenunterschrift lässt sich mit text-align ausrichten.
left, right
Die Plazierung der Tabellenüberschrift links oder rechts der Tabelle wurde nicht in CSS 2.1 übernommen.
Da die Elemente caption vor oder nach einer Tabelle eigenständige Block- Level- Elemente sind, können sie im normalen Elementfluß nicht neben anderen Block- Level- Elementen, wie z. B. table, stehen. Ein korrekt arbeitender Browser muss diese beiden Werte ggf. ignorieren und dafür den Ausgangswert top einsetzen.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

Hier wird eine Tabellenunterschrift erzeugt, die ebenso breit ist wie das Elternelement der Tabelle, mit links justiertem Text (aus den CSS-2.1-Specs entnommen). 

caption { caption-side: bottom; width:auto; text-align:left }

Browserunterstützung

Die Eigenschaft caption-side wird von einigen der modernen Browsern unterstützt. Dabei triit jedoch eine kleine Mehrdeutigkeit auf:

Mozilla 1.7, Camino, Firefox 1
Die Gecko-Engine stellt die Werte left und right aus CSS 2 noch dar, die in CSS 2.1 nicht mehr vorhanden sind. Da CSS 2.1 bis jetzt nicht offiziell normativ ist, kann das Verhalten dieser Browser streng genommen nicht als falsch bezeichnet werden. Dennoch entspricht es nicht dem zukünftigen Standard.
IE/Mac 5, IE/Win 5.x, IE/Win 6, IE 7
Internet Explorer ignoriert diese Eigenschaft völlig bzw. stellt immer den
Ausgangswert dar.
Opera 8.x
Opera verhält sich hier einmal nicht wie der IE 6+, sein Verhalten ist identisch dem des
Safari.
Safari 1.3:
Safari ersetzt die Werte left und right durch den Ausgangswert top. Dies entspricht bereits der zukünftigen Norm CSS 2.1.
Konqueror 3.5
Auch der Konqueror ignoriert diese Eigenschaft völlig bzw. stellt immer den Ausgangswert dar.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

display, text-align

Die Beschriftung gehört zur Tabelle

Die Beschriftung liegt außerhalb des Gitters, aber innerhalb des Tabellenkastens. Sie nimmt die volle Breite der Tabelle ein und verschiebt das Gitter nach unten oder oben, je nachdem, auf welcher Seite sie steht.

Daraus folgt eine Eigenheit: Ist die Beschriftung breiter als das Gitter, wird die Tabelle insgesamt breiter, und das Gitter steht in dieser Breite. Umgekehrt bricht eine lange Beschriftung über der schmalen Tabelle um, statt sie zu verbreitern, sofern die Tabelle ihre Breite aus dem Inhalt bezieht.

Die Eigenschaft wird vererbt, was hier praktisch ist: eine Angabe an einem Abschnitt erreicht alle Tabellen darin, ohne dass jede einzelne Beschriftung angesprochen werden müsste.

Oben oder unten

Die Entscheidung ist keine reine Geschmacksfrage. Im wissenschaftlichen Satz steht die Beschriftung einer Tabelle üblicherweise darüber und die einer Abbildung darunter, weil eine Tabelle von oben nach unten gelesen wird und ihre Überschrift die Spalten ankündigt.

Für die Lesbarkeit spricht dasselbe. Wer eine Tabelle liest, braucht ihren Gegenstand, bevor er die Zahlen sieht; eine Beschriftung darunter erklärt etwas, das bereits gelesen wurde.

CSS 2 kannte zusätzlich Werte für links und rechts, die CSS 2.1 nicht übernommen hat. Sie hätten eine Beschriftung neben das Gitter gestellt, was ein eigenes Stück Layoutmodell erfordert hätte: die Beschriftung müsste eine Breite bekommen und in der Höhe ausgerichtet werden. Geblieben sind die beiden Werte, die sich ohne Zusatzregeln beschreiben lassen.

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Das CSS-Tabellenmodell ist für das Medium handheld nicht anwendbar. Die Eigenschaften border-collapse, border-spacing, caption-side und empty-cells sind nicht Teil des Standards 'CSS Mobile'.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert
top
Berechneter Wert
Spezifizierter Wert
Vererbung
Ja
Anwendbarkeit
Siehe oben
%-Bezugswert
Nicht zutreffend
Mediengruppe(n)
Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.