The Head of the Table - Trials and Tabulations - HTML with Style | WebReference

The Head of the Table - Trials and Tabulations - HTML with Style

Front Page123456789

Trials and Tabulations

The Head of the Table


Table headings

TD stands for "Table Data." This means that cells in TD elements contain data for the table. There is another type of cell, the TH element, that denotes a table header. Table headers provide heading information for certain cells. The table in our example can thus be marked up more accurately like this:

<TABLE>
<TR><TH>Year</TH><TH>Bugs</TH><TH>Sales</TH></TR>
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR>
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR>
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR>
<TR><TD>1999</TD><TD>12.3</TD><TD>33,000,000</TD></TR>
</TABLE>
YearBugsSales
19952.3500,000
19963.21,700,000
19975.68,200,000
199912.333,000,000

Specifying header information

Sometimes it's not obvious which cells are covered by a header cell. An author can specify this relationship by either using the SCOPE attribute on TH elements, or the HEADERS attribute on TD elements. The SCOPE attribute accepts one of four values: row, the default, which indicates that this cell contains header information for the row it occupies, column, which indicates that it covers its column, rowgroup, which indicates that it covers its row group, and colgroup, which indicates that it covers its column group. Our table can thus be enriched like this:

<TABLE>
<TR>
 <TH SCOPE="column">Year</TH>
 <TH SCOPE="column">Bugs</TH>
 <TH SCOPE="column">Sales</TH>
</TR>
<TR><TH SCOPE="row">1995</TH><TD>2.3</TD><TD>500,000</TD></TR>
<TR><TH SCOPE="row">1996</TH><TD>3.2</TD><TD>1,700,000</TD></TR>
<TR><TH SCOPE="row">1997</TH><TD>5.6</TD><TD>8,200,000</TD></TR>
<TR><TH SCOPE="row">1999</TH><TD>12.3</TD><TD>33,000,000</TD></TR>
</TABLE>

The HEADERS attribute accepts as a value a space-separated list of the ID attribute values of the header cells that apply to a cell. The same relationships show above can be defined as follows:

<TABLE>
<TR>
 <TH ID="year">Year</TH>
 <TH ID="bugs">Bugs</TH>
 <TH ID="salws">Sales</TH>
</TR>
<TR>
 <TH ID="y1" HEADERS="year">1995</TH>
 <TD HEADERS="y1 bugs">2.3</TD>
 <TD HEADERS="y1 sales">500,000</TD>
</TR>
<TR>
 <TH ID="y2" HEADERS="year">1996</TH>
 <TD HEADERS="y2 bugs">3.2</TD>
 <TD HEADERS="y2 sales">1,700,000</TD>
</TR>
<TR>
 <TH ID="y3" HEADERS="year">1997</TH>
 <TD HEADERS="y3 bugs">5.6</TD>
 <TD HEADERS="y1 sales">8,200,000</TD>
</TR>
<TR>
 <TH ID="y4" HEADERS="year">1999</TH>
 <TD HEADERS="y4 bugs">12.3</TD>
 <TD HEADERS="y4 sales">33,000,000</TD>
</TR>
</TABLE>

Front Page123456789

Produced by Stephanos Piperoglou

URL: http://www.webreference.com/html/tutorial11/5.html
Created: Feb 10, 1998
Revised: Feb 16, 1999