Chapter 9, Lesson 3
Chapter 9, Lesson 3![[INDEX]](icon_bki.gif){kind=icon}
Ch
9,
L
3 -
Table Captions and Headings
If you already know how to designate heading data for simple text-based tables, and you know how to create a table-caption, you can skip this lesson.
Remember the simple HTML table from the last lesson?
| Class | Jan-Mar | Apr-Jun | Jul-Sep | Oct-Dec |
| Intro to Internet | 14 | 26 | 29 | 28 |
| Building Your Web Page | 26 | 25 | 28 | 30 |
| Perl / CGI | 12 | 12 | 14 | 12 |
It would be nice if we had a way to designate the first row ("class attendance") as a title or "caption" for our table, so that it might be automatically positioned (and sometimes hightlighted) by the browser, without affecting column spacing. Yes, you guessed it, HTML provides a way to do that, using the 'CAPTION' tag pair, as follows
<CAPTION>caption-text</CAPTION>
The caption is generally placed in the HTML file after the opening <TABLE> tag, and before the first <TR> (table-row) tag. Whatever text falls between the opening <CAPTION> tag and the closing </CAPTION> tag is interpreted as the table's caption, and will be placed and (possibly) highlighted as such.
To make the table even more readable, it would be nice to designate some of the data as table-headings. For example, the first row of table-data might make nice column headings, and the first table-data in each row might make nice row headings. We can accomplish this by substituting a 'TH' tag pair for the 'TD' tag pair that we want highlighted as a column or row heading. The 'TH' pair looks like:
<TH> </TH>
We simply select the <TD> tag (and corresponding </TD> tag) that marks the data we want highlighted as a table-heading, and replace those tags with the <TH> and </TH> tags.
Let's examine some sample HTML code:
<TABLE>
CAPTION>Class Attendance</CAPTION>
<TR><TH>Class</TH> <TH>Jan-Mar</TH> <TH>Apr-Jun</TH>
<TH>Jul-Sep</TH><TH>Oct-Dec</TH> </TR>
<TR><TD>Intro to Internet</TD> <TD>14</TD> <TD>26</TD>
<TD>29</TD> <TD>28</TD> </TR>
<TR><TD>Building Your Web Page</TD> <TD>26</TD> <TD>25</TD>
<TD>28</TD> <TD>30</TD> </TR>
<TR><TD>Perl / CGI</TD> <TD>12</TD> <TD>12</TD>
<TD>14</TD> <TD>12</TD> </TR>
</TABLE>
| Class | Jan-Mar | Apr-Jun | Jul-Sep | Oct-Dec |
|---|---|---|---|---|
| Intro to Internet | 14 | 26 | 29 | 28 |
| Building Your Web Page | 26 | 25 | 28 | 30 |
| Perl / CGI | 12 | 12 | 14 | 12 |
Notice how the caption is center-aligned to the table, even though the table itself is aligned to the left margin. Also, notice how the table-data that we re-designated as table-headings were highlighted by the browser. Hey! That's what we wanted it to do! How 'bout them apples?
... leave e-mail ...
