HTML——单元格标签<td>的属性

最新推荐文章于 2025-05-25 21:27:11 发布

时光·漫步zth

最新推荐文章于 2025-05-25 21:27:11 发布

阅读量1.6w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端 HTML

本文链接：https://blog.csdn.net/qq_41573234/article/details/80114640

前端同时被 2 个专栏收录

36 篇文章

订阅专栏

HTML

23 篇文章

订阅专栏

本文详细介绍了HTML表格中单元格的各项属性，包括如何设置单元格的大小、水平及垂直对齐方式、跨行列合并、背景色及背景图片等，为读者提供了丰富的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 设置单元格的大小

在默认情况下，单元格的大小会根据单元格中的内容自动调整，也可以手动设置表格的宽度和高度。

语法： <td width=value height=value>

height: 设置单元格的高度。

2. 设置单元格的水平对齐属性

功能：在水平方向上，设定单元格的对齐方式，分别有居左、居中、居右。

语法： <td align=value>

value取值为left、center和 right

3. 设置单元格的垂直对齐属性

功能：在垂直方向上，设定单元格的对齐方式，分别有居上、居中、居下。

语法： <td valign=value>

value取值为 top、middle和 bottom

*4. 设置单元格的水平跨度

功能：使用跨列属性 colspan 合并单元格，使有的单元格在水平方向上跨过多个列。

语法： <td colspan=value>

value: 代表单元格跨的列数

*5. 设置单元格的垂直跨度

功能：使用跨列属性 rowspan 合并单元格，使有的单元格在垂直方向上跨过多个行。

语法： <td rowspan=value>

value: 代表单元格跨的行数

6. 设置单元格的背景色

功能：为不同的单元格分别设置不同的背景色

语法： <td bgcolor=value>

vakue: 颜色的值，英文颜色名称或十六进制颜色值

7. 设置单元格的背景图片

与表格的行设置不同，单元格可以为背景添加图片。

语法： <td background=value>

value：图片的地址，可以是绝对路径，也可以是相对路径。

<!doctype  html>
<html>
<head>
    
    <title>这是一个网页</title>
</head>
<body>
<table  border=5  bordercolor="red"  align="center"  bgcolor="ABCDEF" background="test.html">
    <caption>书单</caption>
    <tr  align=center>
	<td  bgcolor="pink" colspan="3" height="40" >文学类</td>
    </tr>
    <tr  align=center>
        <td rowspan="2"  width="40">如丧</td>
        <td  width="150">作者:</td>
	 <td>高晓松</td>
    </tr>
    <tr  align=center>
        
        <td>出版社：</td>
	<td>武汉出版社</td>
    </tr>
</table>
</body>
</html>

结果：