td标签用于定义HTML表格中的标准数据单元格,必须嵌套在tr标签内。每个tr代表一行,每对td表示该行的一个数据单元格。支持colspan和rowspan实现跨列跨行,align和valign设置对齐方式(建议用CSS替代)。与th标签不同,td用于普通数据,th用于表头,提升语义与可访问性。实际应用中应保持每行td数量一致,避免用table布局页面,推荐结合thead、tbody、tfoot增强结构,配合scope或aria-label优化无障碍访问。正确闭合标签并遵循嵌套规则是关键。

在HTML中,td 标签用于定义表格中的标准数据单元格,是 table data cell 的缩写。它必须嵌套在 tr(表格行)标签内,而 tr 又位于 table 标签中。正确使用 td 能让网页中的表格结构清晰、语义明确。
基本语法结构
td 单元格的基本写法如下:
| 第一行第一列数据 | 第一行第二列数据 |
| 第二行第一列数据 | 第二行第二列数据 |
每个 tr 表示一行,每对 td 表示该行中的一个数据单元格。
常见属性与用法
虽然现代HTML推荐使用CSS控制样式,但 td 仍支持一些常用属性来调整布局:
立即学习“前端免费学习笔记(深入)”;
-
colspan:让一个单元格横跨多列
例如:合并两列 -
rowspan:让一个单元格纵跨多行
例如:跨三行 - align:设置内容水平对齐方式(left、center、right),建议用CSS替代
- valign:设置内容垂直对齐方式(top、middle、bottom),同样推荐用CSS
与th标签的区别
td 用于普通数据单元格,而 th(table header)用于表头单元格,通常加粗并居中显示。语义上更清晰:
使用 th 有助于屏幕阅读器识别表头,提升可访问性。
实际应用建议
- 确保每行的 td 数量一致,避免布局错乱
- 复杂表格可结合 thead、tbody、tfoot 提升结构语义
- 避免使用 td 实现页面布局,应使用CSS+div
- 为可访问性考虑,建议配合 scope 属性或 aria-label
基本上就这些。掌握 td 的基本写法和常用属性,就能创建出结构清晰、易于维护的HTML表格。不复杂但容易忽略细节,比如闭合标签和嵌套规则,写的时候多留意即可。











