元素td

HTML文件的基本结构

previous page next page
td
适用DTD：Strict Transitional Frameset   适用浏览器：All
释义 表格数据单元格（table data cell）

语法
<td 属性="属性值">~标签内容~</td>
说明
td用来标记表格主体内的数据域，也就是用来定义表格的数据单元格，td为tr的子元素
为了说明各个数据单元格间的关系，可在td元素的id、scope属性中加以设置
在HTML中，其终止标签可以省略

属性
属性 属性值 说明
① headers id引用列表 提供单元格标题信息的标题单元格的列表。该属性值为以空格分隔的标题单元格名称列表，这些单元格必须以id属性命名，就是说header属性值就是这些单元格的id属性值（命名必须符合id属性值命名规范）列表。设计者一般使用header属性帮助非可视化浏览器朗读数据单元格的内容（比如先朗读单元格标题信息然后再朗读单元格数据信息），当然此属性也可与样式表结合使用。由于id属性值区分大小写，所以header属性值也区分大小写
② scope 字符串:预定义值 指定一组单元格用以提供标题信息。在结构简单的表格中，此属性可以实现headers属性完成的功能。此属性质是预设的（不区分大小写），可以为下面的一种：
  • row，表示当前单元格为它所在的行的其余部分（当前单元格之后）的单元格提供标题信息；
  • col，表示当前单元格为它所在的列的其余部分（当前单元格之下）的单元格提供标题信息；
  • rowgroup，标题单元格为包含它的行编组的其它部分提供标题信息；
  • colgroup，标题单元格为包含它的列编组的其它部分提供标题信息
③ abbr 字符串:任意值 为单元格内容指定一个简短的版本（如简称、缩写）。对于较长内容，可以利用这个可选属性为非可视化浏览器提供一个简短的版本，例如语音合成器可能先会朗读特定单元格的相关简写标题，然后再朗读该单元格的内容
④ axis 字符串:任意值 将单元格归入一个概念上的类别。这个类别可以看成是一个n维空间的轴。此后用户代理（浏览器或语音合成器等）能让用户访问这些类别。分类名称可复数指定，以逗号“,”隔开。此属性常用于层次表格
⑤ rowspan 正整数:1 设置当前单元格的在垂直方向上合并单元格的个数。默认值为1，即不与其它行的单元格合并；值0表示从当前行起该单元格垂直合并它所在的表格区段（如thead、tfoot、tbody，如果不存在这些元素，就是整个表格table）中的所有行的单元格
⑥ colspan 正整数:1 设置当前单元格的在水平方向上合并单元格的个数。默认值为1，即不与其它列的单元格合并；值1表示从当前列起该单元格水平合并它所在的列编组（colgroup，如果没有列编组，就是整个表格）中的所有列的单元格
⑦ width 长度值 定义单元格的宽度，正整数像素值或百分比值，不可在Strict DTD中使用
⑧ height 长度值 定义单元格的高度，正整数像素值或百分比值，不可在Strict DTD中使用
⑨ nowrap 空值|nowrap 设置单元格内容禁用自动换行，此属性为布尔属性，即在HTML中没有属性值（空值）。不可在Strict DTD中使用。注意：该属性如果使用不当可能会导致单元格过宽
⑩ align 字符串:预定义值
left		 设置单元格内数据的水平对齐方式，left表示左对齐，center居中对齐，right右对齐，justify分散对齐，char表示按照指定的字符对齐，具体由char属性决定，并非所有的浏览器都支持char对齐
⑪ valign 字符串:预定义值
middle		 设置单元格内数据的垂直对齐方式，top表示向上对齐，middle为默认值，表示居中对齐，top向下对齐，baseline表示对齐第一行的基准线
⑫ char 任一个字符 align属性值为char时，指定文字片段中的某一个字符作为单元格的水平对齐的中心线，默认值是数值的小数点（如英语中用点号“.”，法语中用逗号“,”）。客户浏览器不一定支持这种方式。如果char属性指定的字符在单元格中不只一个，那么各种浏览器的行为是不确定的，所以得谨慎使用
⑬ charoff 长度值 从单元格一端（文字方向从左到右则取左端，从右到左则取右端，由dir属性决定）到第一次出现对齐字符char的位置的距离（不包括对齐字符）。属性值可以为整数或百分比
⑭ bgcolor 颜色值 定义单元格的背景色，此处定义的背景色会颠覆table元素bgcolor定义的背景色，以及单元格所在行定义的背景色。不可在Strict DTD文档中使用
⑮ background URI 定义单元格的背景图案，此处定义的背景图片会颠覆table元素background定义的背景图片，以及单元格所在行定义的背景。不可在Strict DTD文档中使用
⑯ 通用属性：id、title、class、style、dir、lang、xml:lang 查看
nbsp;

示范
<table><tr><td>单元格数据</td></tr></table>;

范例
下面的例子显示了XHTML文件基础结构： 运行打印
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素tr</title>
</head>
<body>
<table>
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<tr> <th>Name <th>Cups <th>Type of Coffee <th>Sugar?
<tr> <td>T. Sexton <td>10 <td>Espresso <td>No
<tr> <td>J. Dinnen <td>5 <td>Decaf <td>Yes
...the rest of the table...
</table><br>
<table border="1" width="400" height="200">
<tr bgcolor="skyblue"><td bgcolor="olive">bgcolor=olive</td><td colspan="2" width="200">colspan=2<br>bgcolor=skyblue</td>
<tr><td align="right">align=right</td><td rowspan="2">rowspan=2</td><td>… </td>
<tr><td valign="top">valign=top</td><td>… </td>
<tr><td>…</td><td>… </td><td>… </td>
</table>
<p>…</p>
<TABLE border="1" summary="This table summarizes travel expenses incurred during August trips to San Jose and Seattle">
<CAPTION>
Travel Expense Report
</CAPTION>
<TR>
<TH></TH>
<TH id="a2" axis="expenses">Meals</TH>
<TH id="a3" axis="expenses">Hotels</TH>
<TH id="a4" axis="expenses">Transport</TH>
<TD>subtotals</TD>
</TR>
<TR>
<TH id="a6" axis="location">San Jose</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="a7" axis="date">25-Aug-97</TD>
<TD headers="a6 a7 a2">37.74</TD>
<TD headers="a6 a7 a3">112.00</TD>
<TD headers="a6 a7 a4">45.00</TD>
<TD></TD>
</TR>
<TR>
<TD id="a8" axis="date">26-Aug-97</TD>
<TD headers="a6 a8 a2">27.28</TD>
<TD headers="a6 a8 a3">112.00</TD>
<TD headers="a6 a8 a4">45.00</TD>
<TD></TD>
</TR>
<TR>
<TD>subtotals</TD>
<TD>65.02</TD>
<TD>224.00</TD>
<TD>90.00</TD>
<TD>379.02</TD>
</TR>
<TR>
<TH id="a10" axis="location">Seattle</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="a11" axis="date">27-Aug-97</TD>
<TD headers="a10 a11 a2">96.25</TD>
<TD headers="a10 a11 a3">109.00</TD>
<TD headers="a10 a11 a4">36.00</TD>
<TD></TD>
</TR>
<TR>
<TD id="a12" axis="date">28-Aug-97</TD>
<TD headers="a10 a12 a2">35.00</TD>
<TD headers="a10 a12 a3">109.00</TD>
<TD headers="a10 a12 a4">36.00</TD>
<TD></TD>
</TR>
<TR>
<TD>subtotals</TD>
<TD>131.25</TD>
<TD>218.00</TD>
<TD>72.00</TD>
<TD>421.25</TD>
</TR>
<TR>
<TH>Totals</TH>
<TD>196.27</TD>
<TD>442.00</TD>
<TD>162.00</TD>
<TD>800.27</TD>
</TR>
</TABLE>
<p>Note that marking up the table this way also allows user agents to avoid confusing the user with unwanted information. For instance, if a speech synthesizer were to speak all of the figures in the "Meals" column of this table in response to the query "What were all my meal expenses? ", a user would not be able to distinguish a day's expenses from subtotals or totals. By carefully categorizing cell data, authors allow user agents to make important semantic distinctions when rendering.</p>
<p>Of course, there is no limit to how authors may categorize information in a table. In the travel expense table, for example, we could add the additional categories "subtotals" and "totals".</p>
<p>This specification does not require user agents to handle information provided by the axis attribute, nor does it make any recommendations about how user agents may present axis information to users or how users may query the user agent about this information.</p>
</body>
</html>
headers、scope、axis、abbr等属性一般为非可视化浏览器设计，或者在应用程序处理表格数据时使用，一般的网页设计中很少使用。

参阅
table
tr
th
thead
tfoot
tbody
col
colgroup

previous page start next page