JSON 转表格完整指南 - HTML/Markdown 表格生成教程（2026）

📖 JSON 转表格完全指南#

在技术文档、网页开发和内容创作中，经常需要将 JSON 数据转换为各种表格格式。本指南将详细介绍 HTML、Markdown、Text 等多种表格格式的转换方法。

🎯 为什么需要 JSON 转表格？#

使用场景#

技术文档：API 文档、使用手册
网页开发：产品展示、数据列表
博客文章：数据对比、功能说明
报告制作：数据汇总、对比分析
Wiki 编写：知识库、FAQ

表格格式对比#

格式	适用场景	优点	缺点
HTML	网页	样式丰富，可交互	代码较长
Markdown	文档	简洁易读	样式有限
Text	纯文本	兼容性最好	不美观
Wiki	Wiki 系统	Wiki 原生支持	使用场景少

📝 表格格式详解#

1. HTML 表格#

基础语法：

1
<table>
2
  <thead>
3
    <tr>
4
      <th>姓名</th>
5
      <th>年龄</th>
6
      <th>城市</th>
7
    </tr>
8
  </thead>
9
  <tbody>
10
    <tr>
11
      <td>张三</td>
12
      <td>25</td>
13
      <td>北京</td>
14
    </tr>
15
    <tr>
16
      <td>李四</td>
17
      <td>30</td>
18
      <td>上海</td>
19
    </tr>
20
  </tbody>
21
</table>

带样式的 HTML 表格：

1
<table class="data-table">
2
  <thead>
3
    <tr>
4
      <th>产品</th>
5
      <th>价格</th>
6
      <th>库存</th>
7
    </tr>
8
  </thead>
9
  <tbody>
10
    <tr>
11
      <td>iPhone 15</td>
12
      <td class="price">¥7,999</td>
13
      <td>100</td>
14
    </tr>
15
  </tbody>
16
  <tfoot>
17
    <tr>
18
      <td>总计</td>
19
      <td>¥7,999</td>
20
      <td>100</td>
21
    </tr>
22
  </tfoot>
23
</table>

CSS 样式：

1
.data-table {
2
  width: 100%;
3
  border-collapse: collapse;
4
  margin: 20px 0;
5
}
6

7
.data-table th {
8
  background-color: #4472C4;
9
  color: white;
10
  padding: 12px;
11
  text-align: left;
12
}
13

14
.data-table td {
15
  border: 1px solid #ddd;
16
  padding: 8px;
17
}
18

19
.data-table tr:nth-child(even) {
20
  background-color: #f2f2f2;
21
}

2. Markdown 表格#

基础语法：

1
| 姓名 | 年龄 | 城市 |
2
|------|------|------|
3
| 张三 | 25 | 北京 |
4
| 李四 | 30 | 上海 |

对齐方式：

1
| 左对齐 | 居中对齐 | 右对齐 |
2
|:-------|:--------:|-------:|
3
| 内容 | 内容 | 内容 |

复杂 Markdown 表格：

1
| 产品 | 价格 | 库存 | 状态 |
2
|------|------|------|------|
3
| iPhone 15 | ¥7,999 | 100 | ✅ 有货 |
4
| MacBook Pro | ¥12,999 | 50 | ⚠️ 紧张 |
5
| AirPods Pro | ¥1,999 | 0 | ❌ 缺货 |

3. Text 表格（ASCII）#

1
┌─────────────┬────────┬────────┐
2
│ 产品        │ 价格   │ 库存   │
3
├─────────────┼────────┼────────┤
4
│ iPhone 15   │ ¥7,999 │ 100    │
5
│ MacBook Pro │ ¥12,999│ 50     │
6
└─────────────┴────────┴────────┘

4. Wiki 表格（MediaWiki）#

1
{| class="wikitable"
2
|-
3
! 产品 !! 价格 !! 库存
4
|-
5
| iPhone 15 || ¥7,999 || 100
6
|-
7
| MacBook Pro || ¥12,999 || 50
8
|}

🛠️ 转换方法#

方法 1：在线工具（推荐）#

工具：XingDian JSON to Table

步骤：

粘贴 JSON 数据
选择表格格式（HTML/Markdown/Text/Wiki）
配置样式选项
复制输出

方法 2：手动转换#

JSON：

1
[
2
  {"name": "张三", "age": 25, "city": "北京"}
3
]

Markdown：

1
| name | age | city |
2
|------|-----|------|
3
| 张三 | 25 | 北京 |

方法 3：程序生成#

Node.js 示例：

1
function jsonToMarkdown(data) {
2
  const headers = Object.keys(data[0]);
3

4
  // 表头
5
  let table = '| ' + headers.join(' | ') + ' |\n';
6
  table += '| ' + headers.map(() => '---').join(' | ') + ' |\n';
7

8
  // 数据行
9
  data.forEach(row => {
10
    const values = headers.map(h => row[h]);
11
    table += '| ' + values.join(' | ') + ' |\n';
12
  });
13

14
  return table;
15
}

🎨 样式设置#

HTML 表格样式#

1. 斑马纹：

1
<table class="striped">

1
.striped tr:nth-child(even) {
2
  background-color: #f9f9f9;
3
}

2. 边框样式：

1
.bordered {
2
  border: 2px solid #333;
3
}
4
.bordered th, .bordered td {
5
  border: 1px solid #ddd;
6
}

3. 悬停效果：

1
.hoverable tr:hover {
2
  background-color: #f5f5f5;
3
}

4. 响应式设计：

1
.table-responsive {
2
  overflow-x: auto;
3
}
4

5
@media (max-width: 768px) {
6
  table {
7
    font-size: 14px;
8
  }
9
}

💼 实战案例#

案例 1：API 文档表格#

需求：在 API 文档中展示请求参数

JSON：

1
[
2
  {"parameter": "username", "type": "string", "required": true, "description": "用户名"},
3
  {"parameter": "password", "type": "string", "required": true, "description": "密码"},
4
  {"parameter": "email", "type": "string", "required": false, "description": "邮箱"}
5
]

Markdown 输出：

1
| 参数 | 类型 | 必填 | 说明 |
2
|------|------|------|------|
3
| username | string | ✅ | 用户名 |
4
| password | string | ✅ | 密码 |
5
| email | string | ❌ | 邮箱 |

案例 2：产品对比页面#

HTML 输出：

1
<table class="comparison-table">
2
  <thead>
3
    <tr>
4
      <th>功能</th>
5
      <th>免费版</th>
6
      <th>专业版</th>
7
      <th>企业版</th>
8
    </tr>
9
  </thead>
10
  <tbody>
11
    <tr>
12
      <td>用户数</td>
13
      <td>5</td>
14
      <td>50</td>
15
      <td>无限</td>
16
    </tr>
17
    <tr>
18
      <td>存储</td>
19
      <td>1GB</td>
20
      <td>10GB</td>
21
      <td>100GB</td>
22
    </tr>
23
  </tbody>
24
</table>

案例 3：GitHub README#

Markdown：

1
## 功能对比
2

3
| 功能 | 开源版 | 专业版 |
4
|------|--------|--------|
5
| 核心功能 | ✅ | ✅ |
6
| 高级分析 | ❌ | ✅ |
7
| 技术支持 | 社区 | 专属 |
8
| 价格 | 免费 | $99/月 |

⚠️ 常见问题#

Q1: 如何处理长文本？#

答：

HTML: 使用<br>换行
Markdown: 单元格内换行用<br>
或限制列宽

Q2: Markdown 支持合并单元格吗？#

答：标准 Markdown 不支持，需要使用 HTML。

Q3: 如何添加链接？#

答：

1
| 产品 | 链接 |
2
|------|------|
3
| [iPhone](url) | [查看](url) |

Q4: 响应式如何处理？#

答：使用 CSS 媒体查询或横向滚动。

🎯 最佳实践#

1. 列数控制#

建议不超过 7 列，否则考虑：

分多个表格
使用横向滚动
转置行列

2. 表头清晰#

使用简洁明确的表头：

1
✅ 好：姓名、年龄、邮箱
2
❌ 差：字段 1、字段 2、字段 3

3. 数据对齐#

文本：左对齐
数字：右对齐
表头：居中

4. 移动端适配#

1
<div class="table-responsive">
2
  <table>...</table>
3
</div>

🚀 立即使用#

在线工具：XingDian JSON to Table

特点：

⚡ 多格式转换
🎨 样式自定义
📱 响应式支持
🔒 安全处理
💾 一键复制