[click to go to previous page] [to index page] [to next page]

5 : Captions and Headings

previous page

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."



next
[click to go to previous page] [to index page] [to top of this page] [to next page]

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