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:

1.

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>

2.

bottom;




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




CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net