The CSS table model allows you to specify the position of the caption element through the caption-side property. This property accepts two values: top (default) and bottom. The former value lets you to position the table caption just before the actual content of a table, while the latter positions that caption just below the table. At the moment of this writing, this property is supported by all browsers, including Internet Explorer 8 and higher. Let's see a practical example:
table {
width: 400px;
border: 1px solid #000;
border-spacing: 0;
caption-side: bottom;
border-collapse: collapse;
font: 1em Arial, sans-serif;
}
caption {
font-weight: bold;
color: #fff;
padding: 0.5em;
background: #000;
border-top: 0.5em solid #fff;
border-radius: 0 0 10px 10px;
}
As you can see, this property must be specified on the table element. Further, since vertical margins have no effect on a table caption, we have to use a top border using the color of the background color of the page to create a vertical spacing between the caption and the rest of the table. You can see a demo below.