Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

17.3. Caption Alignment and Positioning

As you saw in Chapter 8, table captions appear centered above the table to which they are attached. However, using the caption-side and text alignment properties, you can change this behavior. The caption-side property has the following syntax:

caption-side:  top | bottom | left | right;

Setting the appropriate value will position the caption to the corresponding side of the table. If you wish to change the default alignment (center) of the caption, you can use text alignment properties such as text-align or vertical-align. The text alignment properties are covered in more depth in Chapter 14.

Note that you can use the text alignment properties to help control where a table is placed by placing the table within paragraph tags that use appropriate text-align properties.

For example, the following definition will position the corresponding table's caption to the right of the table, with a left-justified, horizontal alignment and a top vertical alignment:

table { caption-side: right; }
caption { margin-left: 10px;
          text-align: left;
          vertical-align: top; }