spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

Trials and Tabulations

The Head of the Table


Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

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