HTML 的 ＜td＞ 元素

1. 什么是 <td> 元素

<td> 是 HTML 中用于定义表格单元格（Table Data）的元素，全称为 "Table Data Cell"。它是构成 HTML 表格的基本单元之一，用于存放表格中的具体数据内容。

在 HTML 表格结构中，<td> 元素必须嵌套在 <tr>（表格行）元素内部，而 <tr> 又必须位于 <table> 元素之中。一个完整的表格结构通常如下：

<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
语义	普通数据单元格	表头单元格
默认样式	无特殊样式，左对齐	加粗、居中显示
使用场景	存放表格数据	存放列标题或行标题
无障碍支持	无特殊标识	会被屏幕阅读器识别为标题

<table>
  <tr>
    <th>产品名称</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>笔记本电脑</td>
    <td>¥6999</td>
  </tr>
</table>

3. <td> 元素的常用属性

3.1 colspan（跨列合并）

colspan 属性用于让一个单元格横向跨越多个列：

<table border="1">
  <tr>
    <td colspan="2">合并两列的单元格</td>
  </tr>
  <tr>
    <td>单元格 A</td>
    <td>单元格 B</td>
  </tr>
</table>

3.2 rowspan（跨行合并）

rowspan 属性用于让一个单元格纵向跨越多个行：

<table border="1">
  <tr>
    <td rowspan="2">跨两行的单元格</td>
    <td>单元格 1</td>
  </tr>
  <tr>
    <td>单元格 2</td>
  </tr>
</table>

3.3 headers（关联表头）

headers 属性用于无障碍访问，将数据单元格与对应的表头单元格关联起来：

<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 对其进行定制：

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> 元素在实际项目中的典型用法：

<!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 或使用响应式表格方案：

.table-wrapper {
  overflow-x: auto;
}

7. 总结

<td> 元素是 HTML 表格中最基础也最常用的元素之一。掌握它的属性用法、与 <th> 的区别以及 CSS 定制技巧，能够帮助你构建结构清晰、样式美观、无障碍友好的数据表格。在实际开发中，建议结合语义化标签和合理的样式设计，让表格既易于阅读又便于维护。