万卷书   首页 > 电脑书籍 > 网站设计其它 > 表格,让Web看起来更美(四) 表头
 

表格中的标题

TD就是“Table Data”,这说明TD元素包含着表格中的数据。还有另外一种类型的单元格:TH元素,它表示表头。表头为特定单元格提供标题信息。前面例子中的表格可以用更好的方式描述:

<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>

Year Bugs Sales
1995 2.3 500,000
1996 3.2 1,700,000
1997 5.6 8,200,000
1999 12.3 33,000,000

指定表头信息

有时表头覆盖哪些单元格并不明显。作者可以通过TH元素的SCOPE属性或TD元素的HEADERS属性来指定这种关系。SCOPE属性接受以下四种取值之一:row,默认值,表示此单元格包含它所在行的标题信息;column,表示覆盖它所在的列;rowgroup,表示覆盖它所在的行组;还有colgroup,表示覆盖它所在的列组。可以像下面那样充实我们的表格:

<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>
HEADERS属性接受以空格分隔的相应表头单元格ID属性值列表,可以像下面那样定义与上例相同的联系:

<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>