首页 » 编程语言 » html » 正文

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

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

<td>标签的定义

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

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

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

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

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

浏览器支持情况

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

<td>标签的用法

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

1、定义标准单元格

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

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

2020-04-23_191303.png

2、跨列标准单元格

如果想要一个标准单元格横跨多列,可以使用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>

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

2020-04-23_192459.png

3、跨行标准单元格

如果想要一个标准单元格竖跨多行,可以使用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>

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

2020-04-23_193313.png

<td>标签的属性

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

属性描述
headersheader_id规定与单元格相关联的一个或多个表头单元格。
colspannumber规定单元格可横跨的列数。
rowspannumber设置单元格可横跨的行数。
abbrtextHTML5 不支持。规定单元格中内容的缩写版本。
alignleft
right
center
justify
char
HTML5 不支持。规定单元格内容的水平对齐方式。
axiscategory_nameHTML5 不支持。对单元格进行分类。
bgcolorrgb(x,x,x)
#xxxxxx
colorname

HTML5 不支持。HTML 4.01 已废弃。

 规定单元格的背景颜色。

charcharacterHTML5 不支持。规定根据哪个字符来进行内容的对齐。
charoffnumberHTML5 不支持。规定对齐字符的偏移量。
heightpixels
%
HTML5 不支持。HTML 4.01 已废弃。
设置单元格的高度。
nowrapnowrapHTML5 不支持。HTML 4.01 已废弃。
规定单元格中的内容是否折行。
scopecol
colgroup
row
rowgroup
HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。
valigntop
middle
bottom
baseline
HTML5 不支持。规定单元格内容的垂直排列方式。
widthpixels
%
HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。

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



欢迎您发表评论或留言