This property specifies the position of elements with an intrinsic
(HTML CAPTION elements) or assigned 'display' property value of
"table-caption" in relation to the table rendering box they are
assigned to. Alignment within the table caption is accomplished
using the 'text-align' and 'vertical-align' properties.
Allowed Values
inherit
[CSS2|CSS2.1]
[N6|O4|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
top
[CSS2|CSS2.1]
[N6|O4|S1]
Type: Explicit
Description:
The caption is positioned above the rendered table box.
bottom
[CSS2|CSS2.1]
[N6|O4|S1]
Type: Explicit
Description:
The caption is positioned below the rendered table box.
left
[CSS2] [O4-O6.x]
Type: Explicit
Description:
The caption is positioned to the left of the rendered table box.
right
[CSS2] [O4-O6.x]
Type: Explicit
Description:
The caption is positioned to the right of the rendered table box.
The values "left" and "right" have been removed in CSS2.1.
Browser Peculiarities
Internet Explorer
4.0-6.x:
- The right/left values were not supported well at all, but an attempt
was made to render these as specified: the left-side caption for
a non-nested table would appear off the screen to the left, and a right-side
caption was rendered over other following content on the right.
4.0+:
- A value of "inherit" seems to be a little buggy: The parent TABLE element
must have the caption-side property applied for the "inherit" value to
have any effect, but then it is only if caption-side is applied to
that table's caption element. If the scenario is having a nested table, and the
parent table is the only element that has caption-side specified, specifying
"inherit" on the nested table or the nested table's caption element will
have no effect. (Yes, that was confusing to write as well ;-})
7.x:
- Caption-side: bottom creates a large bottom padding between the table
and the caption. The size of the padding seems to be about the size of the
table itself.