caption-side property

Sets or retrieves where the caption of a table is located.

CSS 2.1, Section 17.4.1Internet Explorer 8

 

Syntax

caption-side: top | bottom

Property values

A variable of type String that specifies or receives the placement of the caption.

top

For horizontal tables (in horizontal writing modes), the caption is placed above the table. Not supported for vertical tables (in vertical writing modes).

bottom

For horizontal tables, the caption is placed below the table. Not supported for vertical tables.

left

For vertical tables, the caption is placed at the left of the table. Not supported for horizontal tables.

right

For vertical tables, the caption is placed at the right of the table. Not supported for horizontal tables.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Standards information

Remarks

The supported possible values for caption-side depend on the orientation of the table. Horizontal tables (-ms-writing-mode set to lr-* or rl-*) support the top and bottom values. Vertical tables (-ms-writing-mode set to tb-* or bt-*) support the left and right values.

Using an unsupported value for this property (for instance, left on a caption for a horizontal table) will cause the caption to appear at the "logical top" of the table. The logical top of a table depends on the writing mode of the text, and is parallel to and immediately precedes the first line of text in a table.

Captions placed to the left or right of the table are not rotated so as to be read vertically. To do this, use the Rotation property of the BasicImage filter (Windows Internet Explorer only).

Captions placed to the left or right of the table are not rotated so as to be read vertically. To do this, use the Rotation property of the BasicImage filter.

This style attribute can be applied to any element with a display style of table-caption.

This property requires Internet Explorer to be in IE8 Standards mode rendering.

Examples

The following example constructs a table with standard HTML elements. The style rule places the caption above the table.

JavaScript
Copy 

<meta http-equiv="X-UA-Compatible" content="IE=8" />
				
<style type="text/css">
caption {
    caption-side:top;
}
</style>
<table><tr><td>A simple table.</td></tr>
<caption>Table caption.</caption>
</table>

This example uses CSS to construct a table using display attributes. This caption is also placed above its associated table.

JavaScript
Copy 

<meta http-equiv="X-UA-Compatible" content="IE=8" />
				
<style type="text/css">
.table {
    display:table;
    border:1px #eee outset;
    border-spacing:2px;
}
.cell {
    display:table-cell;
    border:1px solid black;
}
.caption {
    display:table-caption;
    caption-side:top;
}
</style>
<div class="table">
<span class="cell">Table content.</span>
<em class="caption">A caption.</em>
</div>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
display

 

 

Show: