caption-side
Summary
Specifies the placement of a table caption.
Overview table
- Initial value
top
- Applies to
- Table-caption elements
- Inherited
- Yes
- Media
- visual
- Animatable
- No
Syntax
caption-side: bottom
caption-side: inherit
caption-side: top
Values
- top
- Positions the caption box above the table box.
- bottom
- Positions the caption box below the table box.
- inherit
- Takes the same specified value as the property for the element’s parent.
Examples
The following example constructs a table with standard HTML elements. The style rule places the caption above the table.
<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.
<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>
Notes
Remarks
The supported possible values for caption-side depend on the orientation of the table. Horizontal tables support the top and bottom values. Vertical tables 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. This style attribute can be applied to any element with a display style of table-caption.
Syntax
caption-side: top | bottom
Standards information
- CSS 2.1, Section 17.4.1
See also
Related articles
Tables
caption-side
Related pages
- CSSStyleDeclarationCSSStyleDeclaration
- currentStylecurrentStyle
- runtimeStyleruntimeStyle
- stylestyle
- displaydisplay
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]