HTML 表格转 JSON 怎么保留行列结构？

现象：粘进来一个 <table>，想变成 JSON

你从网页、后台导出或邮件里复制了一个 HTML 表格，想转成 JSON 方便程序处理。直接按"每一行一个对象"做，遇到表头跨行、合并单元格就乱了。下面讲清正确思路。

基本思路：表头当 key，行当对象

最规整的表格（第一行是表头，下面每行一条记录）转换逻辑很简单：

| 姓名 | 年龄 |
| 张三 | 28   |
| 李四 | 31   |

→

[
  { "姓名": "张三", "年龄": "28" },
  { "姓名": "李四", "年龄": "31" }
]

注意：表格单元格默认都是字符串，数字、日期需要后续再类型转换。

对应的前端核心代码也就十几行，自己实现时可以参照：

function tableToJson(table) {
  const headers = [...table.querySelectorAll('thead th, thead td')]
    .map((th) => th.textContent.trim());
  return [...table.querySelectorAll('tbody tr')].map((tr) => {
    const obj = {};
    [...tr.querySelectorAll('td')].forEach((td, i) => {
      obj[headers[i] ?? `列${i + 1}`] = td.textContent.trim();
    });
    return obj;
  });
}

这个简化版跳过了合并单元格处理，适合规整表格；复杂表格建议直接用下面的工具。

常见坑

1. 表头跨列（colspan）/ 跨行（rowspan）

合并单元格意味着"这个格子属于多个逻辑位置"。简单的"按列索引取值"会错位。处理办法：

• 展开 colspan：把内容复制到它横跨的每一列；
• 展开 rowspan：把内容向下填充到它纵跨的每一行；
• 再按展开后的完整矩阵取值。

举个例子：表头是 <th colspan="2">联系方式</th>，下面拆出"电话""邮箱"两列。展开后 key 应该是 联系方式.电话、联系方式.邮箱（或两层嵌套对象），而不是第二列丢失。

2. 多表头 / 嵌套 thead

有的表格有双层表头，需要决定用哪一层当 key，或把两层拼成 一级.二级。财务报表、监控面板的表格几乎都是这种结构，转换前先看清业务上要"长表"（每行一个观测值）还是"宽表"（一行一个实体、多列指标）——两种形态的 JSON 用途完全不同。

3. 单元格里还有标签

<td> 里若包了 <a>、<span>，要提取的是文本还是属性（如链接 href）？提前定好。常见约定：默认取 textContent，链接列额外输出 { text, href } 对象。

4. 白空格与不可见字符

从网页复制来的单元格经常带  、零宽空格或前后空白。转换前统一 trim() 并把 \u00A0 归一成普通空格，否则后面做 diff、去重、join 全都会"看起来一样就是对不上"。

怎么用工具转换

打开 ToolVault 工具匣 的 HTML 表格转 JSON 工具：

1. 把 <table>...</table> 整段粘入（或贴含表格的网页片段）；
2. 按需勾选「首行作为表头」与「空单元格输出为 null」；
3. 工具解析 DOM，自动展开合并单元格，按表头生成对象数组；
4. 预览结果，确认行列对齐后再复制；需要文档格式时可配合 HTML 转 Markdown。

转完的 JSON 如果字段名混乱，用 JSON 格式化 排版、用 JSON 转 TypeScript 直接生成接口类型定义，一条龙打通"网页表格 → 强类型数据"。

无表头、重复表头与空单元格

关掉「首行作为表头」时，列名变成位置键（col1、col2…）。这比瞎编名字稳妥，但对外 API 发布前应改名。colspan 展开后重复表头标签会撞键——要加限定（区域 / 北、区域 / 南），否则多数 JS 序列化里后写覆盖先写。空单元格在 "" 与 null 之间只选一次（工具可把空映射为 null），并与 CSV / Markdown 兄弟工具保持一致，避免 join「缺失」语义打架。

转换后用 JSON 格式化 抽查：行是否因 rowspan 错位、是否有相同键、是否残留 U+00A0。

FAQ

合并单元格会自动展开吗？

好的工具会。关键是转换前把 rowspan/colspan 摊平成完整矩阵，否则后面的键值会错位。

转出来数字都是字符串，要紧吗？

如果只是展示/存储不要紧；若要参与计算，记得在代码里 Number() 转换，并留意千分位、货币符号要先清洗。日期更麻烦：Excel 序列号、2026/8/31、ISO 8601 是三种不同体系，转换时统一成 ISO 格式最省心。

没有表头的表格能转吗？

能，工具通常会按 列1、列2… 自动编号当 key，你之后可再改名。

大表格转换结果对不上行怎么办？

先检查是否有 rowspan 把行"顶开"了，其次检查 <tbody> 里是否混入了分组的 <tr class="group"> 行——很多后台导出的表格在数据行之间夹小计行，需要在解析时按 class 或列数过滤掉。

排查注记

四个坑的排序有讲究：合并单元格排第一，因为「按列索引取值」在 colspan/rowspan 面前必然错位，解法是先摊平成完整矩阵再取值——FAQ 里大表格行对不上，第一件事也是查 rowspan。多表头那条要求先做长表/宽表的选择，因为两种形态的 JSON 用途完全不同，这是业务决策而不是解析问题。不可见字符的忠告很具体：\u00A0 不归一，后面 diff、去重、join 全都会「看起来一样就是对不上」；重复表头撞键则点明多数 JS 序列化里后写覆盖先写。

本文由 ToolVault 工具匣 提供。相关工具：HTML 表格转 JSON、HTML 转 Markdown、JSON 格式化。访问 首页 查看更多开发者工具。