CSS table caption-side property
CSS Table caption-side Property
Description
The caption-side property determines the placement of the table caption’s box.
Possible Values
- top − Positions the caption’s box above the table’s box.
-
bottom − Positions the title element box below the table box.
-
left − Positions the title element box to the left of the table box.
-
right − Positions the title element box to the right of the table box.
Applies to
All HTML positioned elements.
DOM Syntax
object.style.captionSide = "left";
Example
The following is an example that demonstrates the effect of this property:
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
html>
This operation will produce the following result −
eaa_after_nth_p_1 eaa_desktop” id=”eaa_after_nth_p_1″>