html元素td标签的使用方法及作用

2020年04月24日作者：刘代码分类： html 阅读：866 评论：0

html元素td标签的使用方法及作用详解如下：

<td>标签是"table data cell"的缩写，是定义HTML表格中的标准单元格的；

HTML 表格有两种单元格类型：

表头单元格➜由<th>标签创建的表头信息，其文本默认为居中的粗体文本；

标准单元格➜由<td>标签创建的数据信息，其文本默认为左对齐的普通文本；

<td>标签是成对出现的，以<td>为开始，以</td>为结束；

<td>标签已被所有主流浏览器都支持。

如果需要将内容横跨多个行或列，请使用colspan跨列和rowspan跨行！

<td>标签必须被包含在<tr>元素之内，表示定义html表格的一个单元格；

<table  border="1">
<tr>
<td>td单元格</td>
<td>td单元格</td>
<td>td单元格</td>
</tr>
<tr>
<td>td单元格</td>
<td>td单元格</td>
<td>td单元格</td>
</tr>
</table>

以上演示代码在浏览器中显示效果如下：

如果想要一个标准单元格横跨多列，可以使用colspan属性，其数值大小，表示该单元格跨多少列；

比如，想要跨两列，colspan属性值就设置为2，演示代码如下：

<table  border="1">
<tr>
<td colspan="2">td单元格</td>
<td>td单元格</td>
</tr>
<tr>
<td>td单元格</td>
<td>td单元格</td>
<td>td单元格</td>
</tr>
</table>

以上代码在浏览器中显示效果如下：

如果想要一个标准单元格竖跨多行，可以使用rowspan属性，其数值大小，表示该单元格跨多少行；

比如，想要跨两行，rowspan属性值就设置为2，演示代码如下：

<table  border="1">
<tr>
<td rowspan="2">td单元格</td>
<td>td单元格</td>
<td>td单元格</td>
</tr>
<tr>
<td>td单元格</td>
<td>td单元格</td>
</tr>
</table>

以上代码在浏览器中显示效果如下：

在 HTML 5 中，不再支持<td>标签在 HTML 4.01 中的某些属性；

属性	值	描述
headers	header_id	规定与单元格相关联的一个或多个表头单元格。
colspan	number	规定单元格可横跨的列数。
rowspan	number	设置单元格可横跨的行数。
abbr	text	HTML5 不支持。规定单元格中内容的缩写版本。
align	left right center justify char	HTML5 不支持。规定单元格内容的水平对齐方式。
axis	category_name	HTML5 不支持。对单元格进行分类。
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 不支持。HTML 4.01 已废弃。规定单元格的背景颜色。
char	character	HTML5 不支持。规定根据哪个字符来进行内容的对齐。
charoff	number	HTML5 不支持。规定对齐字符的偏移量。
height	pixels %	HTML5 不支持。HTML 4.01 已废弃。设置单元格的高度。
nowrap	nowrap	HTML5 不支持。HTML 4.01 已废弃。规定单元格中的内容是否折行。
scope	col colgroup row rowgroup	HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。
valign	top middle bottom baseline	HTML5 不支持。规定单元格内容的垂直排列方式。
width	pixels %	HTML5 不支持。HTML 4.01 已废弃。规定单元格的宽度。

在 HTML 5 中，不再支持<td>标签中的abbr、align、axis、bgcolor、char、charoff、height、scope、valign、width属性；