Description:
The caption-side property determines the placement of the element box of a table.s caption.
Possible Values:
- top: Places the caption's element box above the table box.
- bottom: Places the caption's element box below the table box.
- left: Places the caption's element box to the left of the table box.
- right: Places the caption's element box to the right of the table box.
Applies to:
All the HTML positioned element.
DOM Syntax:
| object.style.captionSide="left"; |
Example:
Here is the example which shows effect of this property:
<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>
<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>
|
This will produce following result:
This caption will appear at the top
| Cell A |
| Cell B |
This caption will appear at the bottom
| Cell A |
| Cell B |
This caption will appear at the left
| Cell A |
| Cell B |
This caption will appear at the right
| Cell A |
| Cell B |
|
|
