CSS - caption-side

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

To Become more comfortable - Do Online Practice