HTML 表格数据单元格标签 - <td>

什么是 <td> 标签？

<td> 标签用于定义HTML表格中的数据单元格（table data cell）。它是表格的基本内容单元，用于包含表格中的实际数据。

基本语法

html 
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td> <!-- 这是一个数据单元格 -->
    <td>数据2</td> <!-- 这是另一个数据单元格 -->
  </tr>
</table>

父元素与子元素

父元素

<td> 标签必须作为 <tr>（表格行）元素的子元素。

子元素

<td> 标签可以包含各种HTML内容，包括：

  • 文本
  • 图片
  • 链接
  • 列表
  • 其他表格
  • 任何其他HTML元素

属性

基本属性

属性 描述
colspan 规定单元格可横跨的列数
rowspan 规定单元格可纵跨的行数
align 单元格内容的水平对齐方式（left、center、right、justify）
valign 单元格内容的垂直对齐方式（top、middle、bottom、baseline）
width 单元格的宽度
height 单元格的高度
bgcolor 单元格的背景颜色
bordercolor 单元格边框的颜色
nowrap 禁止单元格内容自动换行
scope 指定单元格是否为表头单元格（仅在某些特定情况下使用，通常用<th>代替）

已废弃的属性

以下属性在HTML5中已被废弃，建议使用CSS替代：

  • align：使用 text-align CSS属性
  • valign：使用 vertical-align CSS属性
  • width：使用 width CSS属性
  • height：使用 height CSS属性
  • bgcolor：使用 background-color CSS属性
  • bordercolor：使用 border-color CSS属性
  • nowrap：使用 white-space: nowrap CSS属性

全局属性

<td> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为单元格指定类名
id 为单元格指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定单元格内容的语言

示例

基本使用

html 
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
    <td>设计师</td>
  </tr>
</table>

跨列（colspan）

html 
<table border="1">
  <tr>
    <th colspan="2">个人信息</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>张三</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td>姓名</td>
    <td>李四</td>
    <td>设计师</td>
  </tr>
</table>

跨行（rowspan）

html 
<table border="1">
  <tr>
    <th>姓名</th>
    <th>张三</th>
    <th>李四</th>
  </tr>
  <tr>
    <th rowspan="2">联系方式</th>
    <td>13800138000</td>
    <td>13900139000</td>
  </tr>
  <tr>
    <td>zhangsan@example.com</td>
    <td>lisi@example.com</td>
  </tr>
</table>

复杂表格（同时使用colspan和rowspan）

html 
<table border="1">
  <tr>
    <th colspan="3">课程表</th>
  </tr>
  <tr>
    <th>时间</th>
    <th>星期一</th>
    <th>星期二</th>
  </tr>
  <tr>
    <td rowspan="2">上午</td>
    <td>数学</td>
    <td>语文</td>
  </tr>
  <tr>
    <td>英语</td>
    <td>物理</td>
  </tr>
  <tr>
    <td rowspan="2">下午</td>
    <td>化学</td>
    <td>生物</td>
  </tr>
  <tr>
    <td>历史</td>
    <td>地理</td>
  </tr>
</table>

包含复杂内容的单元格

html 
<table border="1">
  <tr>
    <th>产品信息</th>
    <th>详情</th>
  </tr>
  <tr>
    <td>
      <img src="product1.jpg" alt="产品1" width="100">
      <h3>产品1</h3>
    </td>
    <td>
      <ul>
        <li>价格：¥100</li>
        <li>库存：100件</li>
        <li><a href="product1.html">查看详情</a></li>
      </ul>
    </td>
  </tr>
</table>

最佳实践

1. 使用语义化结构

将 <td> 标签用于数据单元格，使用 <th> 标签用于表头单元格，以提高表格的语义化和可访问性。

2. 谨慎使用跨行跨列

虽然 colspan 和 rowspan 可以创建复杂的表格布局，但过度使用会使表格难以理解和维护。如果表格变得过于复杂，考虑重新设计表格结构。

3. 使用CSS样式

避免使用HTML属性来设置单元格样式，改用CSS进行样式控制，这更灵活且符合现代Web开发实践。

4. 确保单元格内容清晰

保持单元格内容简洁明了，避免在单个单元格中包含过多复杂内容。如果需要显示大量信息，考虑使用其他布局方式。

5. 保持表格结构一致性

确保表格中的每行包含相同数量的单元格（除非使用了 colspan 或 rowspan），以保持表格结构的一致性。

浏览器兼容性

<td> 标签在所有现代浏览器中都有良好的支持，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE6+

总结

<td> 标签是HTML表格中的数据单元格元素，用于包含表格中的实际数据。通过合理使用 <td> 标签及其属性，可以创建各种复杂程度的表格布局。记住要使用CSS进行样式设置，避免使用已废弃的属性，并遵循最佳实践来确保表格的质量和可维护性。

最后更新：2026-02-07