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」按鈕(或直接敲 Enter)觸發轉換;輸入時會有 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 都可以放心使用,關閉頁面即清除全部資料。