CSS 2.1: `caption-side`

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:

Sie übernehmen alle vererbbaren Eigenschaften aus der zugehörigen Tabelle.
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

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'.