HTML <td> 标签

发表于2015-05-26 13:16:45| 902次阅读| 来源webkfa| 作者小五

摘要：<td> 标签定义 HTML 表格中的标准单元格

实例
一个简单的 HTML 表格，包含两行两列：

		html代码
	

运行代码

<html>
<body>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

01<html>
02<body>
03 
04<table border="1">
05  <tr>
06    <th>Month</th>
07    <th>Savings</th>
08  </tr>
09  <tr>
10    <td>January</td>
11    <td>$100</td>
12  </tr>
13</table>
14 
15</body>
16</html>

浏览器支持
所有浏览器都支持 <td> 标签。

定义和用法
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一般显示为正常字体且左对齐。

HTML 与 XHTML 之间的差异
在 HTML 4.01 中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支持的。

提示和注释
提示：请使用 colspan 和 rowspan 属性来实现内容横跨多个行或列。

可选的属性

		代码
	

01//规定单元格中内容的缩写版本。
02abbr=text
03 
04//规定单元格内容的水平对齐方式。
05align=left|right|center|justify|char
06 
07//对单元进行分类。
08axis=category_name
09 
10//不赞成使用。请使用样式取而代之。
11//规定单元格的背景颜色。
12bgcolor=rgb(x,x,x)|#xxxxxx|colorname
13 
14//规定根据哪个字符来进行内容的对齐。
15char=character
16 
17//规定对齐字符的偏移量。
18charoff=number
19 
20//规定单元格可横跨的列数。
21colspan=number
22 
23//规定与单元格相关的表头。
24headers=header_cells'_id
25 
26//不赞成使用。请使用样式取而代之。
27//规定表格单元格的高度。
28height=pixels|%
29 
30//不赞成使用。请使用样式取而代之。
31//规定单元格中的内容是否折行。
32nowrap=nowrap 
33 
34//规定单元格可横跨的行数。
35rowspan=number
36 
37//定义将表头数据与单元数据相关联的方法。
38scope=col|colgroup|row|rowgroup
39 
40//规定单元格内容的垂直排列方式。
41valign=top|middle|bottom|baseline
42 
43//不赞成使用。请使用样式取而代之。
44//规定表格单元格的宽度。
45width=pixels|%

全局属性
<td> 标签支持 HTML 中的全局属性。
事件属性
<td> 标签支持 HTML 中的事件属性。

更多实例
表格
这个例子演示如何在 HTML 文档中创建表格。

		html代码
	

运行代码

<html>

<body>

<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

01<html>
02 
03<body>
04 
05<h4>带有普通的边框：</h4>  
06<table border="1">
07<tr>
08  <td>First</td>
09  <td>Row</td>
10</tr>   
11<tr>
12  <td>Second</td>
13  <td>Row</td>
14</tr>
15</table>
16 
17<h4>带有粗的边框：</h4>  
18<table border="8">
19<tr>
20  <td>First</td>
21  <td>Row</td>
22</tr>   
23<tr>
24  <td>Second</td>
25  <td>Row</td>
26</tr>
27</table>
28 
29<h4>带有很粗的边框：</h4>  
30<table border="15">
31<tr>
32  <td>First</td>
33  <td>Row</td>
34</tr>   
35<tr>
36  <td>Second</td>
37  <td>Row</td>
38</tr>
39</table>
40 
41</body>
42</html>

表格边框
本例演示各种类型的表格边框。

		html代码
	

运行代码

<html>

<body>

<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

01<html>
02 
03<body>
04 
05<h4>带有普通的边框：</h4>  
06<table border="1">
07<tr>
08  <td>First</td>
09  <td>Row</td>
10</tr>   
11<tr>
12  <td>Second</td>
13  <td>Row</td>
14</tr>
15</table>
16 
17<h4>带有粗的边框：</h4>  
18<table border="8">
19<tr>
20  <td>First</td>
21  <td>Row</td>
22</tr>   
23<tr>
24  <td>Second</td>
25  <td>Row</td>
26</tr>
27</table>
28 
29<h4>带有很粗的边框：</h4>  
30<table border="15">
31<tr>
32  <td>First</td>
33  <td>Row</td>
34</tr>   
35<tr>
36  <td>Second</td>
37  <td>Row</td>
38</tr>
39</table>
40 
41</body>
42</html>

没有边框的表格
本例演示一个没有边框的表格。

		html代码
	

运行代码

<html>

<body>

<h4>这个表格没有边框：</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格也没有边框：</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

01<html>
02 
03<body>
04 
05<h4>这个表格没有边框：</h4>
06<table>
07<tr>
08  <td>100</td>
09  <td>200</td>
10  <td>300</td>
11</tr>
12<tr>
13  <td>400</td>
14  <td>500</td>
15  <td>600</td>
16</tr>
17</table>
18 
19<h4>这个表格也没有边框：</h4>
20<table border="0">
21<tr>
22  <td>100</td>
23  <td>200</td>
24  <td>300</td>
25</tr>
26<tr>
27  <td>400</td>
28  <td>500</td>
29  <td>600</td>
30</tr>
31</table>
32 
33</body>
34</html>

表格中的标题(Headings)
本例演示如何显示表格标题。

		html代码
	

运行代码

<html>

<body>

<h4>表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

01<html>
02 
03<body>
04 
05<h4>表头：</h4>
06<table border="1">
07<tr>
08  <th>姓名</th>
09  <th>电话</th>
10  <th>电话</th>
11</tr>
12<tr>
13  <td>Bill Gates</td>
14  <td>555 77 854</td>
15  <td>555 77 855</td>
16</tr>
17</table>
18 
19<h4>垂直的表头：</h4>
20<table border="1">
21<tr>
22  <th>姓名</th>
23  <td>Bill Gates</td>
24</tr>
25<tr>
26  <th>电话</th>
27  <td>555 77 854</td>
28</tr>
29<tr>
30  <th>电话</th>
31  <td>555 77 855</td>
32</tr>
33</table>
34 
35</body>
36</html>

空单元格
本例展示如何使用" "处理没有内容的单元格。

		html代码
	

运行代码

<html>

<body>

<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td></td>
  <td>Some text</td>
</tr>
</table>

<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>

<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>

<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>

<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>

</body>
</html>

01<html>
02 
03<body>
04 
05<table border="1">
06<tr>
07  <td>Some text</td>
08  <td>Some text</td>
09</tr>
10<tr>
11  <td></td>
12  <td>Some text</td>
13</tr>
14</table>
15 
16<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
17 
18<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
19 
20<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
21 
22<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
23 
24</body>
25</html>

HTML <td> 标签

发表于2015-05-26 13:16:45| 902次阅读| 来源webkfa| 作者小五

相关文章

html标题快速浏览101

相关文章