HTML 表格标签与 AI 合并单元格实战指南

1. 引言

在网页开发中，表格（Table）是最常用的数据展示方式之一。无论是商品列表、成绩单还是数据报表，都离不开表格标签。而随着 AI 辅助编程的普及，如何让 AI 高效地生成带合并单元格的复杂表格，也成为前端开发者必须掌握的技能。本文将从零开始，带你掌握 HTML 表格的核心标签，并学会用 AI 快速生成带合并单元格的表格代码。

2. 表格基础标签

一个完整的 HTML 表格由以下几个核心标签组成：

标签	作用
<table>	定义整个表格容器
<tr>	定义表格中的一行（table row）
<th>	定义表头单元格（table header），默认加粗居中
<td>	定义普通数据单元格（table data）

下面是一个最简单的三行三列表格：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

提示：border="1" 用于显示表格边框，方便开发时观察结构，实际项目中建议通过 CSS 控制样式。

3. 表格常用属性

除了基础标签，表格还支持一些常用属性来增强表现力：

• colspan：单元格横向合并，跨越的列数
• rowspan：单元格纵向合并，跨越的行数
• width / height：设置表格或单元格的宽高
• align：设置单元格内容的水平对齐方式（left / center / right）

<table border="1" width="400">
  <tr>
    <td align="center">居中对齐</td>
    <td align="right">右对齐</td>
  </tr>
</table>

4. 合并单元格详解

合并单元格是表格中最容易出错的部分，也是 AI 生成代码时最需要人工校验的地方。

4.1 横向合并（colspan）

当某个单元格需要横跨多列时，使用 colspan 属性。合并后，该行中的 <td> 数量会相应减少。

<table border="1">
  <tr>
    <th colspan="2">个人信息</th>
    <th>备注</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>张三</td>
    <td>无</td>
  </tr>
</table>

上面的代码中，第一行的 个人信息 横跨了两列，因此该行只有 3 个单元格（2 个合并 + 1 个普通）。

4.2 纵向合并（rowspan）

当某个单元格需要纵跨多行时，使用 rowspan 属性。合并后，被跨越的行中要少写对应的单元格。

<table border="1">
  <tr>
    <td rowspan="2">部门</td>
    <td>研发部</td>
  </tr>
  <tr>
    <td>市场部</td>
  </tr>
</table>

这里第一行的 部门 纵跨两行，所以第二行只需要写一个 <td> 即可。

4.3 同时使用 colspan 和 rowspan

复杂表格中，两者可以同时使用，但务必保证每行的单元格总数一致，否则表格会错位。

<table border="1">
  <tr>
    <th rowspan="2">季度</th>
    <th colspan="2">销售额</th>
  </tr>
  <tr>
    <th>一季度</th>
    <th>二季度</th>
  </tr>
  <tr>
    <td>2024</td>
    <td>100万</td>
    <td>120万</td>
  </tr>
</table>

5. 用 AI 生成合并单元格表格

AI 生成表格代码时，最容易出现的问题是合并后单元格数量对不上，导致表格错位。下面给出一个高效的 AI 提示词模板：

请用 HTML 生成一个 4 行 3 列的表格，要求：
1. 第一行的第一个单元格横向合并 2 列（colspan="2"）
2. 第二行的第一个单元格纵向合并 2 行（rowspan="2"）
3. 表头使用 <th>，数据使用 <td>
4. 添加 border="1" 方便查看结构

AI 生成的代码示例：

<table border="1">
  <tr>
    <td colspan="2">合并两列</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td rowspan="2">合并两行</td>
    <td>数据 A</td>
    <td>数据 B</td>
  </tr>
  <tr>
    <td>数据 C</td>
    <td>数据 D</td>
  </tr>
</table>

5.1 校验 AI 生成结果的技巧

拿到 AI 生成的表格后，建议按以下步骤快速校验：

1. 数单元格 ：每一行的 <td> + <th> 数量之和，减去 colspan 和 rowspan 占用的额外列数，应等于表格总列数。
2. 检查 rowspan 行 ：被 rowspan 跨越的行，必须少写对应数量的单元格。
3. 浏览器预览：最直接的方式，把代码粘贴到浏览器中查看是否错位。

6. 常见错误与排查

错误现象	可能原因	解决方法
表格整体错位	某行单元格数量不一致	逐行数单元格，核对 colspan / rowspan
内容挤在一起	缺少 border 或 CSS 样式	添加边框和 padding
合并后内容丢失	rowspan 行多写了单元格	删除被跨越行中多余的 <td>
AI 生成结构混乱	提示词不够具体	明确行列数、合并位置和标签要求

7. 总结

HTML 表格的核心在于 <table>、<tr>、<th>、<td> 四个标签，而合并单元格则依赖 colspan 和 rowspan 两个属性。使用 AI 生成表格时，只要在提示词中明确行列结构和合并位置，再配合「数单元格」的校验方法，就能快速得到正确的代码。建议多练习几种合并组合，熟能生巧。