CSS: positioning a table caption

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.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.