HTML处理复杂表格的核心是精准控制rowspan和colspan，配合thead/tbody语义结构及border-collapse等CSS边框模型；结构错位（如单元格总数不匹配）会导致渲染异常、错列或空白，本质是逻辑格子数未对齐，而非样式问题。

直接说结论：HTML 处理复杂数据表，**不是靠堆标签，而是靠精准控制 rowspan 和 colspan，再配合语义化结构（thead/tbody）和 CSS 边框模型**。用错一个 rowspan，整行就塌；漏掉一个 td，渲染就会错位——这不是样式问题，是结构病。

为什么简单写 <table><tr><td> 会崩在复杂表头？

因为浏览器会自动补 tbody，但不会帮你算“这个 th 跨了两行，下一行就得少一个 td”。常见现象包括：

• 表头错列、内容整体右移一格
• 某列突然空出一整列空白
• 合并单元格下方出现“幽灵边框”或文字重叠

根本原因：没按“逻辑格子数”对齐每行的单元格总数。比如设计是 4 列宽的表，第一行用 <th colspan="2">A</th><th>B</th><th>C</th>，那这行就是 2+1+1=4 格；第二行就必须也凑够 4 格，不能写 5 个 td，也不能只写 3 个。

rowspan 和 colspan 怎么配着用才不翻车？

它们不是独立开关，而是一对协作的“占位指令”。关键不是“怎么写”，而是“删什么”：

• colspan="3" → 当前行少写 2 个 td 或 th（原本该位置的 3 个单元格，现在只占 1 个）
• rowspan="2" → 下一行同一列位置，必须跳过、不写任何 td/th
• 同时用 rowspan="2" colspan="2" → 当前行少写 1 个单元格，且下一行对应列位置也要跳过（总共“吃掉” 3 个格子）
• 永远从上到下、从左到右逐行检查：每行 td+th 的 colspan 总和是否等于设计列数

示例（合法结构）：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

立即学习“前端免费学习笔记（深入）”；

<table>
  <thead>
    <tr>
      <th rowspan="2">部门</th>
      <th colspan="2">Q1 销售</th>
      <th rowspan="2">负责人</th>
    </tr>
    <tr>
      <th>线上</th>
      <th>线下</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>华东</td>
      <td>240</td>
      <td>180</td>
      <td>张经理</td>
    </tr>
  </tbody>
</table>

注意：<th rowspan="2">部门</th> 吃掉了第二行第一个位置，所以第二行只有 3 个 th，加起来仍是 4 列。

为什么加了 border-collapse: collapse 还有双线？

因为 border-collapse 只管“相邻边框是否合并”，不管“单元格是否被正确生成”。如果结构错乱导致两个 td 实际并排却没共享边框，或者 rowspan 没跳过下一行单元格，CSS 再怎么设也没用。

• 先确保 HTML 结构每一行单元格数对齐（用开发者工具的“元素”面板看实际渲染的 td 数）
• 再加 table { border-collapse: collapse; } 消除默认间距
• 避免混用 border 和 outline，后者不参与边框合并
• 如需细线效果，统一设 border: 1px solid #ccc 在 td, th 上，别只设在 table

复杂点在于：**rowspan/colspan 不是视觉操作，是 DOM 结构声明**。你写的不是“画一个大格子”，而是“这个单元格逻辑上覆盖 N 行 M 列，其余位置请留空”。很多人卡在“看着像对了”，但屏幕阅读器或打印预览里结构已碎——那是语义塌方，不是样式问题。