Setting the Position of a Table Caption

The <caption> tag lets you embed identifying text in a table. You can set the align attribute in the caption tag to define where the caption should appear in relation to the table, but this is being deprecated in favor of the CSS caption-side property (Table 9.5), which does the same thing.

Table 9.5. Caption-Side Values
VALUE	COMPATIBILITY
top	IE5.5^[*] , FF1, O7, S1.3, CSS2
bottom	IE5.5^[*], FF1, O7, S1.3, CSS2
inherit	IE5.5^[*], FF1, O7, S1.3, CSS2

^[*] For Windows only

In this example (Figure 9.5), the caption is forced to the bottom of the table rather than its natural position at the top.

Figure 9.5. In the top table, the caption appears in its default location at the top, while in the second table, it has been moved to the bottom of the table.

To set the position of a caption in relation to its table:

caption-side:

Type the caption-side property name, followed by a colon (Code 9.5).

Code 9.5. The `caption-side` property lets you specify whether the caption should appear above(`top`) or below (`bottom`)the table.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting the Position to a Table Caption</title> <style type="text/css"media="screen"> table {     border: 2px solid #000;     background-color: #ccc; } td {     padding: 5px;     border: 1px solid #000;     background-color: white; } caption {     font-weight: bold;     color: red; } table.placeCaption { caption-side: bottom; } </style> </head> <body> <table> <caption>Resultsfrom the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> </body></html>

bottom;

Type a keyword indicating on which side of the table you want the caption to appear: top or bottom.

Table 9.5. Caption-Side Values

Figure 9.5. In the top table, the caption appears in its default location at the top, while in the second table, it has been moved to the bottom of the table.

Code 9.5. The caption-side property lets you specify whether the caption should appear above(top) or below (bottom)the table.

Code 9.5. The `caption-side` property lets you specify whether the caption should appear above(`top`) or below (`bottom`)the table.