The Wayback Machine - https://web.archive.org/web/20090602192508/http://www.webreference.com:80/html/tutorial11/5.html


spacer

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

Trials and Tabulations

The Head of the Table


Developer News
Rails 3 Gets Supersized With Merb
SpringSource, Hyperic Merge for App Management
Get Ready for Windows 7 'Release Candidate'

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
Copyright 2009 WebMediaBrands Inc. All Rights Reserved.

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

webref The latest from WebReference.com Browse >
Debugging JavaScript: Beyond Alerts · Getting Started with URL Rewriting with Apache · Kicking the Tires on Your Next CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
From Access to Outlook · How to Create an Image Backup, Part 2 · IMshopping Adds a Human Touch to Online Shopping

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

Morty Proxy This is a proxified and sanitized view of the page, visit original site.