源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML 表格添加单元格（数据）

2025/12/29
10
0

学习目标

  • 理解 <td> 标签在 HTML 表格中的核心作用

  • 掌握 <td> 与 <th> 的区别及使用场景

  • 熟练使用 colspan 和 rowspan 实现单元格合并

  • 学会通过 CSS 对 <td> 进行样式优化（内边距、背景色、边框等）

  • 遵循现代 Web 开发的最佳实践，避免使用已废弃的 HTML 属性

什么是 <td> 标签

<td> 是 Table Data Cell（表格数据单元格） 的缩写，用于在 HTML 表格中存放实际内容，如文本、数字、图片、链接等。

基本结构

<table>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

每个 <td> 必须嵌套在 <tr>（表格行）内部，而 <tr> 又必须位于 <table> 中。

默认样式

  • 文本为普通字体（非加粗）

  • 内容左对齐

  • 无默认边框或背景（需手动添加）

<td> vs <th>

特性

<td>（数据单元格）

<th>（表头单元格）

语义

存放具体数据

定义列 / 行标题

默认样式

普通字体，左对齐

加粗，居中对齐

可访问性

被视为普通内容

被屏幕阅读器识别为“标题”

典型位置

表格主体（<tbody>）

表头（<thead>）或首列

原则：只有真正作为“标题”的单元格才用 <th>，其余一律用 <td>。

核心属性

属性

说明

示例

colspan

横向合并多个列

<td colspan="2">跨两列</td>

rowspan

纵向合并多个行

<td rowspan="3">跨三行</td>

id

唯一标识单元格（用于 JS 或锚点）

<td id="total-cell">100</td>

class

应用 CSS 类

<td class="highlight">重点数据</td>

style

内联样式（不推荐频繁使用）

<td style="color: red;">警告</td>

所有全局属性（如 data-*、title）和事件属性（如 onclick）也受支持。

已废弃的属性

请勿使用

以下属性在 HTML5 中已被移除，应完全由 CSS 替代：

废弃属性

功能

CSS 替代方案

align

水平对齐

text-align

valign

垂直对齐

vertical-align

bgcolor

背景色

background-color

width / height

尺寸控制

width / height

nowrap

禁止换行

white-space: nowrap

char / charoff

字符对齐

不推荐使用

错误示例

已过时

<td align="center" bgcolor="#ffebcc" width="100">旧式代码</td>

正确做法

CSS 控制

<style>
  .summary-cell {
    text-align: center;
    background-color: #ffebcc;
    width: 100px;
    padding: 6px;
  }
</style>

<td class="summary-cell">现代写法</td>

实用示例

使用 rowspan

垂直合并单元格

<table border="1">
  <tr>
    <th>商品</th>
    <th>详情</th>
  </tr>
  <tr>
    <td rowspan="2">笔记本电脑</td>
    <td>品牌：星辰科技</td>
  </tr>
  <tr>
    <td>价格：¥5999</td>
  </tr>
</table>

“笔记本电脑” 单元格跨越两行，清晰地将两条相关信息归为一类。

通过 CSS 美化

<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }
    /* 斑马纹：提升可读性 */
    tr:nth-child(even) td {
      background-color: #f8f9fa;
    }
    /* 高亮特定列 */
    td:nth-child(2) {
      font-weight: bold;
      color: #2c6fbb;
    }
  </style>
</head>
<body>
  <table>
    <tr><td>张伟</td><td>32</td></tr>
    <tr><td>李婷</td><td>28</td></tr>
  </table>
</body>

最佳实践

  1. 始终添加内边距（padding）
    避免文字紧贴边框，提升可读性：

    td { padding: 8px 12px; }

  2. 使用边框分隔数据
    尤其在多行多列表格中，边框能显著提升清晰度：

    table, td { border: 1px solid #ddd; }

  3. 避免内联样式，优先使用 class
    便于维护和复用样式。

  4. 合理使用 colspan / rowspan
    仅在逻辑上需要“合并”时使用，避免过度复杂化表格结构。

  5. 不要用表格做页面布局
    <td> 仅用于展示表格型数据，布局应使用 Flexbox 或 Grid。

重点总结

要点

说明

作用

存放表格中的实际数据内容

父元素

必须是 <tr>

合并单元格

使用 colspan（横向）、rowspan（纵向）

样式控制

完全依赖 CSS，禁用 HTML4 表现属性

可访问性

与 <th> 配合使用，确保表格结构语义清晰

思考题

  1. 如果一个 <td> 同时设置了 colspan="2" 和 rowspan="2"，它会覆盖多少个原始单元格？

  2. 如何通过 CSS 让某一列的所有 <td> 单元格右对齐（例如金额列）？

  3. 在动态生成表格时（如从 API 获取数据），如何安全地将用户输入插入 <td> 中以防止 XSS 攻击？