spacer

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

Trials and Tabulations

The Head of the Table


Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

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