更新时间:2014年8月10日

td元素(表格单元格)

<td colspan="" rowspan="" headers="">~</td>

td元素用于表示表格的单元格。td元素中放入具体内容。

属性

1、colspan内容属性
colspan内容属性表示该当单元格及所涉及的列数范围。该属性的值必须是1以上的整数。
2、rowspan内容属性
rowspan内容属性表示该当单元格及所涉及的行数范围。该属性的值必须是1以上的整数。
3、headers内容属性
指定与该当单元格相对应的表头(th元素)的id内容属性的值。可指定多个值。

使用colspan(水平方向的结合)的例

<table border="3">

<tr>

<td colspan="3">水平方向的结合</td>

</tr>

<tr>

<td>单元格1</td>

<td>单元格2</td>

<td>单元格3</td>

</tr>

</table>

浏览器上的显示结果↓


水平方向的结合
单元格1 单元格2 单元格3

使用rowspan(垂直方向的结合)的例

<table border="3">

<tr>

<td rowspan="3">垂直方向的结合</td>

<td>单元格1</td>

</tr>

<tr>

<td>单元格2</td>

</tr>

<tr>

<td>单元格3</td>

</tr>

</table>

浏览器上的显示结果↓


垂直方向的结合 单元格1
单元格2
单元格3

同时使用colspan和rowspan的例

<table border="3">

<tr>

<td colspan="3" rowspan="3">结合9个单元格</td>

<td>单元格1-4</td>

</tr>

<tr>

<td>单元格2-4</td>

</tr>

<tr>单元格3-4</td>

</tr>

<tr>

<td>单元格4-1</td>

<td>单元格4-2</td>

<td>单元格4-3</td>

<td>单元格4-4</td>

</tr>

</table>

浏览器上的显示结果↓

单元格3-4
结合9个单元格 单元格1-4
单元格2-4
单元格4-1 单元格4-2 单元格4-3 单元格4-4

使用headers属性的例

<table border="3">

<tr>

<th id="t1">标题1</th>

<th id="t2">标题2</th>

<th id="t3">标题3</th>

</tr>

<tr>

<td headers="t1">数据1-1</td>

<td headers="t2">数据2-1</td>

<td headers="t3">数据3-1</td>

</tr>

<tr>

<td headers="t1">数据1-2</td>

<td headers="t2">数据2-2</td>

<td headers="t3">数据3-2</td>

</tr>

</table>

浏览器上的显示结果↓


标题1 标题2 标题3
数据1-1 数据2-1 数据3-1
数据1-2 数据2-2 数据3-2

对于像例这样的简单例子建议使用scope属性会更加方便。

同时连接纵列与横列的例

<table border="3">

<tr>

<th></th>

<th id="t1">标题单元格1</th>

<th id="t2">标题单元格2</th>

<th id="t3">标题单元格3</th>

</tr>

<tr>

<th id="s1">标题单元格A</th>

<td headers="s1 t1">数据单元格A-1</td>

<td headers="s1 t2">数据单元格A-2</td>

<td headers="s1 t3">数据单元格A-3</td>

</tr>

<tr>

<th id="s2">标题单元格B</th>

<td headers="s2 t1">数据单元格B-1</td>

<td headers="s2 t2">数据单元格B-2</td>

<td headers="s2 t3">数据单元格B-3</td>

</tr>

<tr>

<th id="s3">标题单元格C</th>

<td headers="s3 t1">数据单元格C-1</td>

<td headers="s3 t2">数据单元格C-2</td>

<td headers="s3 t3">数据单元格C-3</td>

</tr>

</table>

浏览器上的显示结果↓


标题单元格1 标题单元格2 标题单元格3
标题单元格A 数据单元格A-1 数据单元格A-2 数据单元格A-3
标题单元格B 数据单元格B-1 数据单元格B-2 数据单元格B-3
标题单元格C 数据单元格C-1 数据单元格C-2 数据单元格C-3

与scope属性联合的使用例

<table border="3">

<tr>

<th scope="col">标题单元格1</th>

<th scope="col">标题单元格2</th>

<th scope="col">标题单元格3</th>

</tr>

<tr>

<th id="s1">标题单元格A</th>

<th></th>

<th></th>

</tr>

<tr>

<td headers="s1">数据单元格A-1-1</td>

<td headers="s1">数据单元格A-2-1</td>

<td headers="s1">数据单元格A-3-1</td>

</tr>

<tr>

<td headers="s1">数据单元格A-1-2</td>

<td headers="s1">数据单元格A-2-2</td>

<td headers="s1">数据单元格A-3-2</td>

</tr>

<tr>

<th id="s2">标题单元格B</th>

<th></th>

<th></th>

</tr>

<tr>

<td headers="s2">数据单元格B-1-1</td>

<td headers="s2">数据单元格B-2-1</td>

<td headers="s2">数据单元格B-3-1</td>

</tr>

<tr>

<td headers="s2">数据单元格B-1-2</td>

<td headers="s2">数据单元格B-2-2</td>

<td headers="s2">数据单元格B-3-2</td>

</tr>

</table>

浏览器上的显示结果↓


标题单元格1 标题单元格2 标题单元格3
标题单元格A
数据单元格A-1-1 数据单元格A-2-1 数据单元格A-3-1
数据单元格A-1-2 数据单元格A-2-2 数据单元格A-3-2
标题单元格B
数据单元格B-1-1 数据单元格B-2-1 数据单元格B-3-1
数据单元格B-1-2 数据单元格B-2-2 数据单元格B-3-2

X

浏览器支持情况

元素
video yes yes yes yes yes