position of the table caption

caption-side: ***;

Browser
Firefox Opera

The caption-side property specifies the position of the table caption.

This property can apply to the CAPTION element.

caption {
caption-side: bottom;
}

Property Value Explanation
caption-side top positions the caption above the table (default) FirefoxOpera
bottom positions the caption below the table FirefoxOpera
left positions the caption to the left of the table Firefox
right positions the caption to the right of the table Firefox

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

div { margin-bottom: 20px; }
table, td, th { border: 2px #2b2b2b solid; }
table { width: 300px; }

#example1 caption { caption-side: top; }

#example2 caption { caption-side: bottom; }

#example3 table { margin-left: 5em; }
#example3 caption { caption-side: left; }

#example4 table { margin-right: 5em; }
#example4 caption { caption-side: right; }

#example5 caption {
caption-side: bottom;
text-align: right;
}

#example6 table { margin-right: 5em; }
#example6 caption {
caption-side: right;
vertical-align: bottom;
}

</style>

</head>
<body>

<div id="example1">
<table>
<caption>top</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

<div id="example2">
<table>
<caption>bottom</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

<div id="example3">
<table>
<caption>left</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

<div id="example4">
<table>
<caption>right</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

<div id="example5">
<table>
<caption>bottom</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

<div id="example6">
<table>
<caption>right</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

</body>
</html>
Output
top
Heading A Heading B
Cell A Cell B
bottom
Heading A Heading B
Cell A Cell B
left
Heading A Heading B
Cell A Cell B
right
Heading A Heading B
Cell A Cell B
bottom
Heading A Heading B
Cell A Cell B
right
Heading A Heading B
Cell A Cell B