HTML <td> 标签-代码号

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

什么是<td>标签？

<td>标签是HTML表格中定义标准数据单元格的核心元素，必须作为<tr>行的子元素使用。与之对应的<th>标签则用于定义表头单元格，具有默认的加粗和居中特性。

在2025年的现在网页开发中，表格仍然是展示结构化数据的重要方式，而<td>标签的熟练掌握是前端开发者的基本功。

语法与结构

<table>
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

每个<td>标签都需要成对出现，内容写在开始标签和结束标签之间。表格的每一行应该包含相同数量的单元格，如果某行单元格数量不足，浏览器会自动填充空单元格。

实际应用示例

基础数据表格

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 90%;
      margin: 20px auto;
      border-collapse: collapse;
    }
    th {
      background-color: #1c87c9;
      color: white;
      padding: 12px;
    }
    td {
      padding: 10px;
      border: 1px solid #ddd;
      background-color: #f9f9f9;
    }
    tr:nth-child(even) td {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>课程名称</th>
      <th>学习难度</th>
      <th>建议学习周期</th>
    </tr>
    <tr>
      <td>HTML基础</td>
      <td>初级</td>
      <td>2周</td>
    </tr>
    <tr>
      <td>CSS样式</td>
      <td>初级到中级</td>
      <td>3周</td>
    </tr>
    <tr>
      <td>JavaScript编程</td>
      <td>中级</td>
      <td>4周</td>
    </tr>
  </table>
</body>
</html>

跨列与跨行属性

colspan跨列示例

<table style="width:80%; margin:20px auto; border-collapse:collapse;">
  <tr>
    <th colspan="2" style="background:#1c87c9; color:white; padding:15px;">
      代码号学习平台课程统计
    </th>
  </tr>
  <tr>
    <td style="padding:10px; border:1px solid #ddd;">前端课程</td>
    <td style="padding:10px; border:1px solid #ddd;">25门</td>
  </tr>
  <tr>
    <td style="padding:10px; border:1px solid #ddd;">后端课程</td>
    <td style="padding:10px; border:1px solid #ddd;">18门</td>
  </tr>
</table>

rowspan跨行示例

<table style="width:80%; margin:20px auto; border-collapse:collapse;">
  <tr style="background:#e6ebef;">
    <th style="padding:10px; border:1px solid #666;">学期</th>
    <th style="padding:10px; border:1px solid #666;">课程数量</th>
  </tr>
  <tr>
    <td style="padding:10px; border:1px solid #666;">2025年春季</td>
    <td rowspan="2" style="padding:10px; border:1px solid #666; text-align:center; background:#a3cced;">
      15门课程
    </td>
  </tr>
  <tr>
    <td style="padding:10px; border:1px solid #666;">2025年夏季</td>
  </tr>
</table>

重要属性解析

虽然HTML5淘汰了许多传统属性，但以下属性仍然非常重要：

colspan: 定义单元格横跨的列数，值为正整数
rowspan: 定义单元格纵跨的行数，值为正整数
headers: 指定与单元格相关联的一个或多个表头单元格ID

从我的开发经验来看，合理使用colspan和rowspan可以创建出结构清晰的复杂表格，但过度使用会导致表格结构难以维护。

CSS样式技巧

文本样式控制

td {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #333;
  text-transform: none;
  text-decoration: none;
}

布局与背景样式

td {
  padding: 12px 15px;
  text-align: left;
  vertical-align: middle;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

tr:hover td {
  background-color: #f5f5f5;
}

本节课程知识要点

<td>标签必须位于<tr>标签内，用于定义表格数据单元格
使用colspan和rowspan实现单元格合并，但需谨慎使用
通过CSS可以控制表格单元格的样式和外观
表格应该用于展示真正的表格化数据，而非页面布局

项目开发建议

在代码号编程学习过程中，我发现很多初学者容易滥用表格进行页面布局。这种做法在2025年已经过时，应该使用Flexbox或Grid布局替代。

对于真正的数据表格，建议添加适当的语义化标签如<thead>、<tbody>和<tfoot>来提高可访问性。同时，为表格添加标题<caption>和范围属性scope也能提升用户体验。

<table>
  <caption>代码号平台课程进度表</caption>
  <thead>
    <tr>
      <th scope="col">课程模块</th>
      <th scope="col">完成状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML基础</td>
      <td>已完成</td>
    </tr>
    <tr>
      <td>CSS进阶</td>
      <td>进行中</td>
    </tr>
  </tbody>
</table>

常见问题解决

单元格内容溢出：使用CSS的word-wrap和overflow属性控制文本换行和溢出处理。

边框显示问题：推荐使用border-collapse: collapse来合并边框，避免双边框问题。

响应式表格：对于移动设备，可以考虑将表格转换为卡片布局或使用水平滚动。

本文标签：

HTML <td> 标签