5 : Captions and Headings

The colspan attribute introduced on the last page is also useful in making column headings.
But before we go into headings, let me show you a feature of tables that I have been using so far without mentioning: the CAPTION.

The caption tag is used inside the opening and closing <table> tags.
The caption is NOT contained within a border.
The alignment options are "TOP" (appears top/centered),
"LEFT" (appears top/left),
"RIGHT" (appears top/right),
and "BOTTOM" (appears centered underneath table).
The default alignment of the caption is "TOP."

In the following table, the caption appears in blue, and demonstrates the "BOTTOM" alignment.
NOTE: the caption tag does not have a color attribute, and will normally appear in the default font color unless you use other tags to modify it.

Growth Table
GROWTH PROJECTIONS
/	June	July	Aug.
U.S.A.	0.20%	0.45%	0.80%
Mexico	1.20%	1.80%	2.01%

Table 7 Code

<table border=2 bgcolor=gray cellpadding=5>
<caption align=bottom>Growth Table</caption>
 <tr>
    <th colspan=4>GROWTH PROJECTIONS</th>
  </tr>
  <tr>
    <th> / </th>
    <th>June</th>
    <th>July</th>
    <th>Aug.</th>
  </tr>
  <tr>
    <th>U.S.A.</th>
    <td> 0.20% </td>
    <td> 0.45% </td>
    <td> 0.80% </td>
  </tr>
  <tr>
    <th>Mexico</th>
    <td> 1.20% </td>
    <td> 1.80% </td>
    <td> 2.01% </td>
  </tr>
</table>

In the code for the above table there are a number of new features; please note in particular the <caption> tag and its align attribute.
Next, if I may draw your attention to the first table row (indicated by the first set of <tr>... </tr> tags), you will notice <th> tags have been used in place of <td> tags.

<th> stands for "table heading."
You can use the <th> tags anywhere you would use <td> tags.
The <th> tag makes the text BOLD and gives the text a CENTER alignment.

In the "Growth Table" above, you can see I used the <th> tag combined with the colspan attribute to give the main heading of "GROWTH PROJECTIONS" to the entire table (though it wasn't really necessary in this particular case, since I also used the <caption> tag). I also used the <th> tag to name the rows "U.S.A." and "Mexico" and to name the columns "June," "July," & "Aug."


Copyright© 1998. Liberty Miller . All rights reserved. This material may not be reproduced without the written permission of the author.
Last Modified 01/05/98		Page 5

5 : Captions and Headings

Page 5