從貼上到複製，三秒搞定

有沒有這樣的經驗：在某個網頁上看到一張你需要的資料表格，想把它整理進系統或程式裡，卻得一格一格手動複製，還要小心對齊欄位、格式……

這種事不應該花超過兩分鐘。

只要把 HTML 表格原始碼，貼進本站的 HTML 表格轉 JSON 工具，工具就會自動解析結構，輸出整齊的 JSON 陣列，讓你直接複製使用。

📋 HTML 表格長什麼樣？

在開始使用工具之前，先快速了解 HTML 表格的基本結構，對理解工具的轉換邏輯很有幫助。

一個標準的 HTML 表格由以下標籤組成：

標籤用途
<table>整個表格的外框
<thead>表頭區塊（通常放欄位名稱）
<tbody>表格主體（資料列）
<tr>一個橫列（table row）
<th>表頭儲存格（預設粗體）
<td>一般資料儲存格

基本範例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>部門</th>
      <th>薪資</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>王小明</td>
      <td>工程部</td>
      <td>60000</td>
    </tr>
    <tr>
      <td>陳美華</td>
      <td>行銷部</td>
      <td>55000</td>
    </tr>
  </tbody>
</table>

🔄 轉換後的 JSON 長什麼樣？

工具以 <th> 標籤的內容作為 JSON 物件的「鍵（key）」，以每一列 <td> 的內容作為對應的「值（value）」。

上面那張表格，轉換後會得到：

[
  {
    "姓名": "王小明",
    "部門": "工程部",
    "薪資": "60000"
  },
  {
    "姓名": "陳美華",
    "部門": "行銷部",
    "薪資": "55000"
  }
]

這是一個標準的 JSON 陣列（Array），每個元素是代表一列資料的 JSON 物件（Object），欄位名稱來自表格標題，直接可以被 JavaScript、Python、PHP 等語言讀取使用。

🛠️ 使用情境：你什麼時候會需要它？

1. 把政府公開資料轉進系統

很多政府網站（例如統計數字、開放資料頁面）只提供 HTML 表格格式。如果你需要把這些資料匯進自己的資料庫或試算表，先轉成 JSON 再處理，會省下大量手動複製的時間。

2. 前端切版從設計稿擷取假資料

設計師提供的 Figma 或 Zeplin 畫面上常有已填好內容的表格。把表格 HTML 貼進工具，立刻得到可用的 Mock JSON，省去手打假資料的時間。

3. 抓取網頁資料（Web Scraping 前置處理）

當你在開發爬蟲時，擷取到的原始 HTML 往往包含大量標籤。把目標表格的 HTML 片段貼入工具，快速確認資料結構是否如你所想，再決定爬蟲的解析邏輯。

4. 整理 ETL 工作流程的資料

在 ETL（Extract → Transform → Load）流程中，「從 HTML 表格轉成 JSON」正好對應 Transform 階段。手動做一次、用工具驗證格式，再寫自動化腳本，效率更高。

⚠️ 使用注意事項

表格必須有 <th> 標題列

工具以表頭作為 JSON 鍵名。若表格沒有 <th>，工具可能以自動編號（col_0, col_1...）代替，或需要手動補充標題。

複雜表格結構可能需要預處理

如果表格有：

  • 合併儲存格（colspan / rowspan）：會影響每列的欄位對齊
  • 巢狀表格（表格中有另一個表格）：工具一般只解析最外層結構
  • 空白儲存格：對應的 JSON 值會是空字串 ""

遇到這類情況，建議先在 HTML 中手動拆分標題，或貼入後再調整輸出結果。

數字仍以字串型別輸出

HTML 本身沒有資料型別概念，所有儲存格內容都是純文字。因此轉換出的 JSON 中，數字欄位的值會是 "60000" 而非 60000。如需整數或浮點數型別，需在接收端自行做型別轉換（parseInt()、parseFloat() 等）。

💡 小技巧：怎麼取得網頁表格的 HTML？

  1. 在目標表格上按右鍵 → 「檢查」（Inspect）
  2. 在開發者工具的 Elements 面板中，找到 <table> 標籤
  3. 在該標籤上按右鍵 → 「複製」→「複製元素（Copy element）」
  4. 貼進 表格轉 JSON 工具，完成！

注意：部分網站以 JavaScript 動態渲染表格，直接「檢視網頁原始碼」看不到完整 HTML，需透過開發者工具的 Elements 面板才能取得渲染後的真實 DOM 結構。

常見問題 FAQ

Q1：我沒有完整的 <table> 標籤，只有 <tr> 部分，可以用嗎？

工具通常能容錯處理片段 HTML，但建議盡量貼入完整的 <table>...</table> 區塊，以確保解析結果正確。

Q2：轉換出的 JSON 可以直接貼進 MySQL 嗎？

不行，MySQL 不直接接受 JSON 陣列貼上。你需要先用程式語言（如 PHP 的 json_decode()、Python 的 json.loads()）讀取 JSON，再用 INSERT 語句逐筆寫入資料庫。

Q3：欄位名稱有中文，JSON 會有問題嗎？

不會。JSON 規格支援 UTF-8，中文鍵名完全合法，可在任何現代語言與工具中正常解析。

Q4：工具有字元數或列數限制嗎？

本工具為純前端運算，沒有後端請求，處理速度受瀏覽器效能影響。一般網頁表格（數百列以內）均可即時轉換，超大型資料集建議分批處理。

總結

HTML 表格與 JSON 是在不同場景下各有用途的資料格式——前者人眼友善、適合網頁展示；後者機器友善、適合程式處理。當你需要跨越這兩個世界時，一個好的轉換工具能省下大量重複性工作。

下次當你盯著一張複雜的 HTML 表格、想著「我要怎麼把這個轉成程式能讀的格式」時，記得本站有這個工具等著你。

👉 現在就試試看：HTML 表格轉 JSON 工具，貼上原始碼，立刻取得 JSON！