Table Captioning
The <caption> Tag
You can caption a table by coding a <caption> tag
immediately following the <table> tag. Enter a table
title between the opening and closing <caption> tags
and the title displays centered over the table. The caption is displayed
in the page default font style and size, and formatting is applied with
style sheets as is done in the following code example for the table
appearing in Figure 8.13.
This is My Table
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-13. A table with a caption.
<style type="text/css">
table {border:outset 3px;}
table td {border:inset 1px;}
table caption {font:bold 10pt arial;}
</style>
<table>
<caption>This is My Table</caption>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Listing 8-13. Code for a table with a caption.
You can apply styling to the caption through a caption selector. In this
example, font styling is applied with the shorthand font notation,
font:style variant weight size family
The caption is centered by default. The text-align property can be applied
to the caption to align it with the left or right edge of the table.
Captions appear only at the top of the table. Style sheet standards propose
the caption-side:top|bottom|left|right style declaration for positioning
captions; however, this property has not been implemented in current browsers.
The <th> Tag
Column headings can be supplied with <th> tags in place of
<td> tags enclosing cell contents. The <th>
tag automatically centers and bolds the enclosed text. Additional styles can be
applied to the tags for additional formatting. Notice in the following example
that the th selector is added to the style sheet for borders surrounding these cells.
This is My Table
| Column 1 |
Column 2 |
Column 3 |
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-14. Using the <th> tag for column headings.
<style type="text/css">
table {border:outset 3px; border-collapse:collapse;}
table td, th {border:inset 1px;}
table caption {font:bold 10pt arial;}
</style>
<table>
<caption>This is My Table</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Listing 8-14. Code to produce column headings for a table.
The <th> tag is unique only in that it provides default
bold and centered styling for its contents. With style sheets, however,
this tag becomes redundant since this same styling can be applied without
using this special tag. The following table duplicates the previous table
without <th> tags simply by identifying and styling the
first row of the table.
This is My Table
| Column 1 |
Column 2 |
Column 3 |
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-15. Producing column headings by styling a row.
<style type="text/css">
table {border:outset 3px; border-collapse:collapse;}
table tr#HEAD {font:bold; text-align:center;}
table td {border:inset 1px;}
table caption {font:bold 10pt arial;}
</style>
<table>
<caption>This is My Table</caption>
<tr id="HEAD">
<td>Column 1</td>
<td>Column 2</td>
<td>Column 2</td>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Listing 8-15. Code to produce column headings by styling a row.
The contextual selector tr#HEAD td indicates styling for td tags that appear
inside a tr tag with id="HEAD". It is your choice whether to use the th tag
to take advantage of its inherent styling or to manage all styling through
style sheets. As a general rule, the fewer tag to deal with the better.
Deprecated Caption align Attribute
Captions can appear at the top or bottom of a table using the align="top"
(default) or align="bottom" attribute of the <caption> tag.
Top Table Caption
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
e.g., <caption align="top">Top Table Caption</caption>
Bottom Table Caption
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
e.g., <caption align="bottom">Bottom Table Caption</caption>
As noted above, style sheet standards propose the caption-side property
to replace the align attribute; however, this property has not been
implemented in current browsers.