JSON 转 HTML

点击转换从 JSON 生成 HTML 表格

选项:行索引条纹边框悬停紧凑响应式包裹|嵌套处理:

免费在线 JSON 转 HTML 工具，把 JSON 数组或嵌套对象一键转成可直接嵌入网页的标准 HTML 表格代码。支持嵌套拍平（user.name）、自定义 CSS class、响应式横向滚动、6 项可视化样式、null 占位符、行数限制保护，Code 与 iframe 双 Tab 实时预览，类型感知高亮与本地历史记录。

关于 JSON 转 HTML 与 HTML 表格

JSON 转 HTML 工具（JSON to HTML Converter）是一种把 JSON 数据结构自动转换为标准 HTML 表格代码的实用工具。它把开发者从手写 `<table>` / `<tr>` / `<td>` 模板的重复劳动中解放出来，特别适合需要把 API 返回的嵌套数据、配置文件或任何 JSON 结构快速展示为网页表格的场景。

HTML 表格（HTML Table）是 W3C 标准的结构化数据展示元素，由 `<table>` 容器、`<thead>` 表头、`<tbody>` 表体、`<tr>` 行、`<th>` 表头单元格、`<td>` 数据单元格、`<caption>` 标题等标签组成。本工具生成的代码严格遵循这套语义化结构，方便后续 SEO 抓取与无障碍访问（屏幕阅读器可识别）。

市面上的 JSON 转 HTML 工具分三类：第一类仅生成 HTML 代码字符串（如 tooltt.com、codebeautify.org），强调「复制即用」；第二类同时提供可视化预览（如本工具、jsontables.com、TableConvert），强调「所见即所得」；第三类支持嵌套展开 + Tailwind class 注入（本工具的差异化定位），适合需要把 JSON 嵌入到现代前端项目的工程师。

本工具的「嵌套拍平」是相对大多数竞品的差异化亮点：传统工具遇到 `{user:{name:'Alice'}}` 会直接显示成 `{"name":"Alice"}` 字符串，而本工具会递归展开为 `user.name` 列（最多 6 层深度，分隔符可自定义）。这意味着你可以直接处理 GitHub API、Stripe API、Notion API 等嵌套结构复杂的真实业务数据，无需预先用 jq / lodash 拍平。

另一个差异化亮点是「自定义 CSS class 钩子」：工具不仅生成内联 style，还允许在 `<table>` 标签上注入任意 class 字符串。这让 Tailwind / Bootstrap / Bulma / DaisyUI 等主流 CSS 框架的用户可以直接复用本工具生成的 HTML，并立即获得与项目一致的设计风格，无需手动改 CSS。

适用场景

前端开发：把 API 返回的 JSON 数据快速渲染成 HTML 表格嵌入到管理后台或文档页
Tailwind / Bootstrap 项目：直接在「table class 名」输入 Tailwind 或 Bootstrap 类，与既有样式系统无缝集成
响应式网页：默认开启横向滚动包裹，移动端表格不撑破布局
数据可视化展示：在博客 / 文档 / Confluence / Notion 等支持 HTML 嵌入的平台粘贴带样式的表格
报表生成：把后端导出的 JSON 数据快速转成可发送给业务方的 HTML 邮件报表
前端原型设计：设计稿阶段用真数据预览表格样式，方便交付前与产品 / 设计对齐
CMS 系统：为 WordPress / Drupal 等 CMS 制作静态 HTML 表格片段，避免模板引擎复杂度
测试与调试：在浏览器控制台用 JSON.stringify 输出后粘贴进来，快速预览复杂嵌套数据的二维结构
邮件模板：把表格 HTML 内联到 HTML 邮件中（注意 Outlook 等客户端兼容需测试）
API 文档编写：在 Markdown / Swagger / Redoc 中嵌入 HTML 表格替代默认 JSON 示例
教学场景：数据结构课程中把学生提交的嵌套 JSON 作业转表格统一批改展示
数据清洗报告：把数据库导出的嵌套 JSON 通过拍平模式转表格，方便对比字段

使用方法

在左侧编辑器粘贴 JSON 数组（推荐）或单个对象，或点击「Sample」加载 3 条商品示例，或点击「Upload」上传 .json / .txt 文件
在工具栏选择嵌套处理模式（推荐「拍平」），嵌套对象会自动展开为 `user.name` 等点号键名
点击「Convert」按钮（或直接敲回车）触发转换；输入时会有 500ms 防抖保护
右侧 Code 标签查看带语法高亮的 HTML 表格代码，Preview 标签查看 iframe 实时渲染效果
在工具栏勾选样式选项（斑马纹 / 边框 / 悬停 / 紧凑 / 响应式）、填写自定义 table class、设置 null 占位符，实时预览自动更新
满意后点击「Copy」复制 HTML 代码粘贴到网页，或点击「Download」下载为 table.html 文件；如需重置点击 Reset

功能特点

嵌套对象自动拍平：递归展开 `{user:{name,age}}` 为 `user.name`、`user.age` 等点号键名（分隔符可配置），无需手写拍平脚本
三种嵌套处理模式：拍平（推荐，深度 6 层自动展开）/ 首层键（嵌套对象作为单列）/ 转字符串（嵌套对象转 JSON 字符串预览）
自定义 CSS class 钩子：为 `<table>` 与可选外层 `<div>` 注入自定义 class 字符串，无缝对接 Tailwind / Bootstrap / Bulma 等样式系统
响应式横向滚动：默认外层包裹 `overflow-x:auto` 容器，窄屏自动出现横向滚动条，不挤压页面布局
6 项可视化样式配置：斑马纹、边框、行悬停高亮、紧凑模式、首列索引（#）、表格 Caption 标题，工具栏复选框即时生效
Code 与 iframe 预览双 Tab：Code 标签显示带语法高亮的 HTML 源码，Preview 标签通过 sandbox iframe 即时渲染真实表格效果
类型感知高亮：null 显示为灰色斜体（可自定义占位文本）、布尔值根据 true/false 显示为绿色/红色、数字显示为蓝色、嵌套对象悬停查看完整 JSON
行数限制保护：默认 1000 行上限（1-10000 可调），超出自动截断并在 UI 提示「已截断」，避免浏览器对超大 DOM 渲染卡顿
生成统计反馈：右侧面板实时显示「已生成 X 行 × Y 列」+ 截断徽章，调试长 JSON 时一眼看清数据规模
一键复制 / 下载：Code 模式下可一键复制 HTML 源码到剪贴板，或下载为 table.html 文件直接用于网站
示例数据 + 文件上传：内置 3 条商品示例（Laptop / Mouse / Desk Chair）一键加载，支持拖拽或点击上传 .json / .txt 文件
选项一键重置：工具栏右侧 Reset 按钮一键恢复全部 14 项配置到默认值，方便快速试错
本地历史记录：基于 localStorage 持久保存最近 200 条输入，刷新或误关页面后可快速恢复
完全浏览器本地运行：所有 JSON 解析、HTML 生成、复制下载操作在你的浏览器内完成，数据不上传任何服务器

代码示例

JavaScript：嵌套拍平 + Tailwind class 集成

javascript

实际开发中最常见的用法：调用 GitHub API 后嵌套对象拍平为点号键名，再用 Tailwind class 集成到项目。

// 1) 调用 GitHub API 获取用户列表
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) 嵌套拍平函数（与本工具的拍平逻辑等价）
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) 把拍平后的数据转 HTML 表格，注入 Tailwind class
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) 注入到页面
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('生成 ' + users.length + ' 行，列数 ' + (Object.keys(flattenObject(users[0])).length));

Python：Flask 中嵌套 JSON 转 HTML 表格（无前端依赖）

python

后端模板渲染时，可直接用 Python 内置库生成同样的 HTML 表格，支持嵌套拍平和 class 注入。

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """递归拍平嵌套对象"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>无数据</p>"

    # 行数截断
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # 拍平每行数据
    flat_rows = [flatten(row) for row in data]

    # 收集所有列名（用 set 去重，保持插入顺序）
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # 生成表头
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # 生成表格行
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">数据已截断至前 {max_rows} 行</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

命令行：jq 拍平 + 本工具生成静态 HTML 报表

bash

运维场景：把嵌套 JSON 日志统计后用 jq 拍平，再粘贴到本工具生成带 Tailwind class 的 HTML 报表。

# 1) 用 jq 把嵌套日志聚合并拍平为点号键名
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) 把 stats.json 粘贴到本工具
#    工具栏选择「拍平（推荐）」模式
#    勾选「斑马纹 + 响应式包裹 + 边框」
#    在 table class 名输入: min-w-full text-sm border-collapse
#    设置 null 占位符: -（缺失字段显示 -）
#    设置 Caption: 2026-07 生产错误日志统计
#    点击 Convert 后下载 table.html

# 3) 上传到 S3 / OSS 静态网站
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# 或嵌入到 Confluence / Notion / VuePress 文档
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# 或发送 HTML 邮件
mutt -e "set content_type=text/html" -s "2026-07 错误日志" your@email.com < table.html

常见问题

怎么把 JSON 数据转成 HTML 表格？

把 JSON 数组（每个元素是一个对象）粘贴到左侧输入框，点击工具栏「Convert」按钮，右侧 Code 标签会显示带语法高亮的 HTML 表格代码，切到 Preview 标签可看到 iframe 实时渲染效果，再点「复制」即可粘贴到任何 HTML 页面中。

嵌套的 JSON 对象能转成 HTML 表格吗？

可以。本工具内置嵌套拍平模式，会递归把 `{user:{name:'Alice',age:30}}` 展开成 `user.name`、`user.age` 两列，深度最多 6 层。还可以在工具栏切换为「首层键」模式（保留嵌套对象作为单列 JSON 字符串）或「转字符串」模式（完全当字符串处理）。

拍平后的键名分隔符能改吗？

默认使用 `.` 作为分隔符（`user.name`），符合 JavaScript / MongoDB / Lodash 等主流约定。如需 `user_name` 或 `user/name`，可在工具栏的「分隔符」输入框自定义（高级用户可见）。

生成的 HTML 表格可以自定义样式吗？

工具有三种样式定制方式：① 工具栏 6 项可视化开关（斑马纹 / 边框 / 悬停 / 紧凑 / 索引 / Caption）即时生效；② 在「table class 名」输入框填写自定义 class（如 Tailwind 的 `min-w-full border-collapse`），会注入到 `<table class="...">` 中；③ 直接修改生成的 HTML 后再使用。

支持 Tailwind / Bootstrap 吗？

支持。在「table class 名」输入框中填写 Tailwind 类（如 `min-w-full border-collapse text-sm`）或 Bootstrap 类（如 `table table-striped table-hover table-bordered`），工具会把这些 class 注入到 `<table>` 标签中。注意：工具的内联 style 优先级最高，会覆盖 Tailwind 的部分样式（背景色、内边距），建议关闭对应工具栏选项（如斑马纹）后再用 Tailwind。

Code 标签和 Preview 标签有什么区别？

Code 标签显示带语法高亮的 HTML 源码，方便复制和编辑；Preview 标签通过 sandbox iframe 渲染真实表格效果，所见即所得。两者内容完全一致，只是展示形式不同，方便你在「看代码」和「看效果」之间快速切换。

生成的 HTML 支持移动端响应式吗？

支持。工具默认开启「响应式包裹」选项，会在 `<table>` 外层包裹一个 `<div style="overflow-x:auto;max-width:100%;">` 容器。当屏幕宽度小于表格宽度时，容器会自动出现横向滚动条，避免表格撑破页面布局。可在工具栏关闭此选项。

单元格里的 null、布尔值、数字会怎么显示？

工具做了类型感知高亮：null 显示为灰色斜体（占位文本可在工具栏自定义为 `N/A` / `-` / `空` 等）；布尔值 true 显示为绿色，false 显示为红色；数字显示为蓝色；普通字符串原样显示；嵌套对象在拍平模式下按路径取值，在其他模式下转 JSON 字符串并截断到 50 字符。

生成的 HTML 代码可以直接用于网站吗？

可以。生成的是标准 W3C HTML5 表格结构（`<table>` / `<thead>` / `<tbody>` / `<caption>`），CSS 通过内联 style 输出，可直接粘贴到任何 HTML 页面中独立使用，不依赖外部 CSS 或 JS。也可以下载为 table.html 文件。

JSON 转 HTML 和 JSON 转 CSV 有什么区别？

HTML 表格是带样式的可视化格式，适合直接嵌入网页展示；CSV 是纯文本数据格式，适合导入 Excel / Pandas / 数据库做数据分析。两者都从同一份 JSON 数据生成，建议先用本工具在网页上预览排版，再用 JSON 转 CSV 工具导出数据版本。

怎么修改表头文字？

工具自动使用 JSON 对象的第一层 key 作为表头 `<th>` 内容（在拍平模式下用点号分隔的完整路径，如 `user.name`）。如果你希望表头显示其他文字（如中文），有三种方法：① 直接修改源 JSON 的 key 名为中文；② 生成后在右侧 Code 标签里手动修改 `<th>...</th>` 内容；③ 用 sed 批量替换生成的 HTML。

下载的 table.html 在浏览器打开是空白的怎么办？

下载的 table.html 本身只有 `<table>` 标签结构（可能含响应式外层 `<div>`），没有完整的 HTML 骨架（`<html>` / `<head>` / `<body>`），是为方便嵌入到现有网页而设计的片段代码。可手动用 HTML 格式化工具加上完整 HTML 骨架，或直接粘贴到你的项目页面对应位置。

生成 1000+ 行的表格页面卡顿怎么办？

工具默认设置 1000 行上限保护，超过会提示「已截断」。如确需生成 5000 行大表，可把工具栏的「最大行数」调到 10000，但建议：① 拆分成分页表格（每页 50 行）；② 用 IntersectionObserver 实现虚拟滚动；③ 或在数据展示场景用 TanStack Table / AG Grid 等专用组件库。

数据上传到服务器吗？隐私安全吗？

完全本地浏览器运行。所有 JSON 解析、HTML 生成、复制下载操作都在你的浏览器内通过 JavaScript 完成，文件读取也只在本地 FileReader 中处理，不会发送到任何服务器。包含敏感 API 返回、未公开业务字段的 JSON 都可以放心使用，关闭页面即清除。

故障排查

提示「请输入 JSON 数据」或类似错误

左侧输入框为空或只有空白字符。确保已粘贴有效的 JSON 内容，或点击「Sample」加载示例数据，或点击「Upload」选择 .json / .txt 文件。

提示「Unexpected token ... in JSON at position N」

JSON 格式不合法。常见原因：① 末尾有多余逗号（如 [{},{},]）；② 用了单引号而非双引号；③ JS 对象写法（如 {key: value}）而非 JSON（{"key": "value"}）。可用 JSON 格式化工具先校验修复。

生成的表格只有表头没有数据行

JSON 数据是空数组 [] 或空对象 {}。本工具对空数组会返回「」注释。可在源 JSON 中至少添加一条对象数据。

拍平模式下列名太长（如 user.profile.address.city.country.code）

嵌套层级太深时建议：① 改用「首层键」模式（仅取顶层字段，嵌套对象作为整列 JSON）；② 修改源 JSON 结构，减少不必要的嵌套；③ 用工具栏的 Reset 按钮恢复默认拍平配置。

Tailwind class 注入后样式没生效

工具默认输出内联 style（如 padding、background），会覆盖 Tailwind 的同名 utility 类。建议：① 关闭工具栏对应的样式选项（如斑马纹）后再用 Tailwind 控制背景色；② 或在生成的 HTML 后用 PostCSS 移除内联 style 属性。

响应式包裹后表格高度被压缩

「响应式包裹」会让外层 div 默认高度跟随表格。如果你的父容器是 flex 布局且未指定高度，子表格可能被压缩。可在父容器上加 min-h-0 或设置表格高度。

下载的 table.html 在浏览器打开是空白的

下载的文件仅包含 <table> 片段（可能含响应式外层 <div>），没有完整的 HTML 骨架（<!doctype html> / <html> / <head> / <body>）。这是为了方便嵌入到现有网页而设计。可使用 HTML 格式化工具添加完整骨架，或直接粘贴到项目的对应位置。

表头中文显示乱码

源 JSON 中的 key 含中文，确保源文件本身是 UTF-8 编码。如果是从 Excel 复制的 JSON，可能被转成 GBK，可先用编码转换工具转为 UTF-8 再粘贴。

想批量修改生成的表格（如替换公司 Logo / 改颜色）

生成后在右侧 Code 标签里复制 HTML，用 sed / PostCSS / 自写脚本批量替换样式属性。常用命令：sed -i '' 's/#f9fafb/#your-color/g' table.html。

生成 1000+ 行的表格页面卡顿

工具默认设置 1000 行上限保护。可在工具栏调整 maxRows 到 10000，但浏览器对超大 DOM（>1000 节点）渲染性能下降明显。建议：① 拆分成分页表格（每页 50 行）；② 用 IntersectionObserver 实现虚拟滚动；③ 或在数据展示场景用 TanStack Table / AG Grid 等专用组件库。

历史记录丢失了

历史记录存储在浏览器 localStorage 中，清除浏览器数据 / 切换到无痕模式 / 使用其他浏览器都会导致历史记录消失。本工具不会上传历史到任何服务器，因此无法跨设备同步。

行数限制后看不到原始数据

工具默认 maxRows=1000，超出会截断。如果你的源数据 > 1000 行但只需要前 N 行预览，把 maxRows 调小（如 100）反而能更快拿到结果。如需全量数据，建议直接用 Python Faker / Node.js 等脚本处理。

术语表

HTML 表格 (HTML Table): W3C 标准的结构化数据展示元素，由 table / thead / tbody / tr / th / td / caption 等语义化标签组成。本工具生成的代码严格遵循这套结构。
JSON 数组: 方括号 [...] 包裹的对象集合。本工具把数组的每个对象作为表格一行；如果是空数组则不生成表格（显示提示）。
JSON 对象: 花括号 {} 包裹的键值对集合。本工具把对象的每个 key 作为表头，value 作为单元格；单个对象会被自动包装为单行表格。
嵌套拍平 (Flatten): 把嵌套对象递归展开为点号分隔的扁平键名，例如 {user:{name:'A'}} → 'user.name'。本工具支持 6 层深度自动拍平，分隔符可配置。
thead / tbody: HTML 表格的两个语义化分区：thead 包裹表头行（th），tbody 包裹数据行（td）。本工具生成的代码严格区分这两部分。
Caption: 表格标题标签，位于 table 内部第一行。本工具支持自定义 Caption 文本，开启后会在表格上方显示指定标题，对 SEO 和无障碍都有帮助。
斑马纹 (Zebra Striping): 表格奇偶行交替使用不同背景色的视觉模式，常用 #fff / #f9fafb 组合。本工具通过「斑马纹」复选框开启，对长表格可读性提升显著。
内联样式 (Inline Style): 通过 HTML 标签的 style 属性直接编写 CSS，而非引用外部样式表。本工具默认所有样式都通过内联 style 输出，复制即可使用，无需额外 CSS 文件。
CSS class 钩子: 本工具的差异化能力：在 <table> 标签上注入任意 class 字符串（如 Tailwind 类），与既有 CSS 框架无缝集成。这是相对竞品的关键升级。
iframe sandbox: HTML 标签 iframe 的安全沙箱模式，可限制脚本执行、表单提交等。本工具用 sandbox="allow-same-origin" 的 iframe 预览生成的 HTML，防止意外脚本运行。
type-aware 高亮: 本工具的差异化能力：根据单元格 value 的 JS 类型（null / boolean / number / object / string）应用不同颜色，让调试 API 数据更直观。
localStorage 历史: 浏览器提供的本地键值存储（容量约 5-10MB）。本工具用 localStorage 持久保存最近 200 条输入，刷新或误关页面后可快速恢复。
响应式包裹 (Responsive Wrapper): 在表格外层加 <div style="overflow-x:auto;max-width:100%;">，让表格在窄屏自动出现横向滚动条。本工具默认开启，可在工具栏关闭。
防抖 (Debounce): 前端性能优化技巧：把高频事件（如输入）的回调合并为最后一次触发后执行一次。本工具设置 500ms 防抖，避免大文件解析卡顿。
W3C HTML5: 万维网联盟（W3C）制定的 HTML 标准规范。本工具生成的代码符合 HTML5 规范，可在所有现代浏览器中正确渲染。

三种嵌套对象处理模式对比表

工具栏提供三种模式应对不同的嵌套场景，建议根据 JSON 结构复杂度选择：

模式	处理行为	示例列名	适用场景
`拍平（推荐）`	递归展开嵌套对象为点号分隔的键名（深度 ≤ 6）	`user.name / user.tags.0`	GitHub / Stripe / Notion 等真实 API 嵌套结构；希望每个字段单独成列
`首层键`	只取对象第一层 key，嵌套对象 / 数组作为单列 JSON 字符串	`user / tags`	嵌套结构不固定或太深（>6 层）；只关心顶层字段概览
`转字符串`	所有 value 强制当字符串处理，嵌套对象直接 JSON.stringify	`user (作为整段 JSON)`	调试场景：希望保留原始 JSON 结构供肉眼检查

工具栏 14 项可配置选项速查表

工具栏全部 14 项可配置选项及其视觉差异，方便快速选择组合：

选项	类型	视觉效果 / 行为
`includeIndex`	`checkbox`	在表格最左侧添加 # 编号列（从 1 开始递增）
`striped`	`checkbox`	奇偶行交替底色（白 / #f9fafb）
`bordered`	`checkbox`	单元格四周 1px 灰色边框 + 表头底部 2px 强调线
`hover`	`checkbox`	鼠标悬停行时整行变浅灰 #f9fafb 背景
`compact`	`checkbox`	单元格内边距从 10px×14px 缩小为 6px×8px
`responsive`	`checkbox`	外层包裹 overflow-x:auto 容器，窄屏横向滚动
`flattenMode`	`select`	嵌套处理：拍平（推荐）/ 首层键 / 转字符串
`tableClass`	`text`	注入到 <table class="..."> 的自定义 CSS class
`nullPlaceholder`	`text`	null / undefined 单元格的显示文本（留空显示 'null'）
`maxRows`	`number`	最大生成行数（1-10000），超出自动截断并提示
`caption`	`text`	表格上方显示的自定义标题文本（caption-side: top）
`indexHeader`	`text`	首列索引列的表头文本（默认 #）
`flattenSeparator`	`text`	拍平模式的键名分隔符（默认 .，可改为 _ / - 等）
`wrapperClass`	`text`	响应式外层 <div> 的自定义 CSS class（高级用户）

单元格类型感知高亮规则速查表

工具会根据 JSON value 的 JavaScript 类型自动应用不同颜色，方便快速识别数据类型：

JS 类型	判断方法	应用样式	示例输出
`null / undefined`	`val === null \|\| val === undefined`	color: #9ca3af; font-style: italic; 显示占位文本（可自定义）	`<span style="color:#9ca3af;font-style:italic;">N/A</span>`
`boolean (true)`	`typeof val === 'boolean' && val`	color: #059669;	`<span style="color:#059669;">true</span>`
`boolean (false)`	`typeof val === 'boolean' && !val`	color: #dc2626;	`<span style="color:#dc2626;">false</span>`
`number`	`typeof val === 'number'`	color: #2563eb;	`<span style="color:#2563eb;">42</span>`
`object / array (拍平模式)`	`type === 'object' + 拍平模式按路径取值`	嵌套对象按路径取出原子值	`user.name → 'Alice'`
`object / array (其他模式)`	`typeof val === 'object'`	JSON.stringify 后转义并截断到 50 字符，紫色斜体 + title 悬停看完整 JSON	`<span style="color:#7c3aed;font-style:italic;" title="...">{"id":1…</span>`
`string`	`其他情况`	默认文本色 #4b5563	`Jennifer Martinez`

Privacy & Security

本 JSON 转 HTML 工具所有 JSON 解析、嵌套拍平、HTML 生成、复制下载操作完全在你的浏览器本地通过 JavaScript 完成，输入的 JSON 数据和生成的 HTML 代码都不会被上传到任何服务器，也不会被记录、缓存或存储到云端。包含未公开 API 返回、内部业务字段的敏感 JSON 都可以放心使用，关闭页面即清除全部数据。