1. 什么是 <td> 元素
<td> 是 HTML 中用于定义表格单元格（Table Data）的元素，全称为 "Table Data Cell"。它是构成 HTML 表格的基本单元之一，用于存放表格中的具体数据内容。
在 HTML 表格结构中，<td> 元素必须嵌套在 <tr>（表格行）元素内部，而 <tr> 又必须位于 <table> 元素之中。一个完整的表格结构通常如下：
html
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>2. <td> 与 <th> 的区别
在表格中，除了 <td> 之外，还有一个与之密切相关的元素 <th>（Table Header）。两者虽然都用于定义单元格，但在语义和使用场景上有明显区别：
| 对比项 | <td> | <th> |
|---|---|---|
| 全称 | Table Data Cell | Table Header Cell |
| 语义 | 普通数据单元格 | 表头单元格 |
| 默认样式 | 无特殊样式，左对齐 | 加粗、居中显示 |
| 使用场景 | 存放表格数据 | 存放列标题或行标题 |
| 无障碍支持 | 无特殊标识 | 会被屏幕阅读器识别为标题 |
html
<table>
<tr>
<th>产品名称</th>
<th>价格</th>
</tr>
<tr>
<td>笔记本电脑</td>
<td>¥6999</td>
</tr>
</table>3. <td> 元素的常用属性
3.1 colspan（跨列合并）
colspan 属性用于让一个单元格横向跨越多个列：
html
<table border="1">
<tr>
<td colspan="2">合并两列的单元格</td>
</tr>
<tr>
<td>单元格 A</td>
<td>单元格 B</td>
</tr>
</table>3.2 rowspan（跨行合并）
rowspan 属性用于让一个单元格纵向跨越多个行：
html
<table border="1">
<tr>
<td rowspan="2">跨两行的单元格</td>
<td>单元格 1</td>
</tr>
<tr>
<td>单元格 2</td>
</tr>
</table>3.3 headers（关联表头）
headers 属性用于无障碍访问，将数据单元格与对应的表头单元格关联起来：
html
<table>
<tr>
<th id="name">姓名</th>
<th id="score">成绩</th>
</tr>
<tr>
<td headers="name">李四</td>
<td headers="score">92</td>
</tr>
</table>3.4 全局属性
<td> 元素同样支持所有 HTML 全局属性，如 class、id、style、data-* 等，方便进行样式定制和数据绑定。
4. <td> 元素的默认样式与 CSS 定制
浏览器对 <td> 元素有一套默认样式，但通常我们会通过 CSS 对其进行定制：
css
td {
padding: 8px 12px;
border: 1px solid #ddd;
text-align: left;
vertical-align: middle;
background-color: #f9f9f9;
}4.1 常用 CSS 属性
padding：控制单元格内边距border：设置单元格边框text-align：控制文本水平对齐方式vertical-align：控制内容垂直对齐方式background-color：设置单元格背景色white-space：控制单元格内文本是否换行
5. 实际应用示例
下面是一个完整的综合示例，展示 <td> 元素在实际项目中的典型用法：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>员工信息表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) td {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>部门</th>
<th>姓名</th>
<th>职位</th>
<th>入职年份</th>
</tr>
<tr>
<td rowspan="2">技术部</td>
<td>王小明</td>
<td>前端工程师</td>
<td>2021</td>
</tr>
<tr>
<td>李小红</td>
<td>后端工程师</td>
<td>2022</td>
</tr>
<tr>
<td>市场部</td>
<td>张伟</td>
<td>市场专员</td>
<td>2020</td>
</tr>
</table>
</body>
</html>6. 注意事项与最佳实践
6.1 语义化使用
- 数据单元格使用
<td>，表头单元格使用<th>，不要混用 - 合理使用
colspan和rowspan减少冗余单元格
6.2 无障碍访问
- 为复杂表格添加
headers属性关联表头 - 使用
<caption>元素为表格提供标题说明
6.3 避免嵌套表格
除非必要，尽量避免在 <td> 中嵌套另一个表格，这会增加页面复杂度和维护成本。
6.4 响应式处理
在移动端，宽表格可能溢出屏幕，可通过 CSS 设置 overflow-x: auto 或使用响应式表格方案：
css
.table-wrapper {
overflow-x: auto;
}7. 总结
<td> 元素是 HTML 表格中最基础也最常用的元素之一。掌握它的属性用法、与 <th> 的区别以及 CSS 定制技巧，能够帮助你构建结构清晰、样式美观、无障碍友好的数据表格。在实际开发中，建议结合语义化标签和合理的样式设计，让表格既易于阅读又便于维护。