caption-side: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

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)
bottom positions the caption below the table
left positions the caption to the left of the table Fx
right positions the caption to the right of the table Fx

Example


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

<style type="text/css">

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

#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