CSV 轉 HTML 表格轉換器 (CSV→HTML)

將 CSV 檔案轉換為使用 <table><tr><td> 標記的 HTML 程式碼片段。可選擇分隔符、是否將首行作為表頭、是否用 <thead>/<tbody> 包裹。轉換結果可即時預覽,並支援複製或下載。轉換完全在瀏覽器內完成,資料不會發送到伺服器。

分隔符
將首行作為表頭
用 thead/tbody 包裹

預覽

HTML 程式碼


            
            已複製!
            
          

輸入 CSV 資料後,轉換後的 HTML 表格會顯示在這裡。

CSV 行與 HTML 表格的對應關係

一行 CSV name,age,city
轉換後的 HTML 標記 <tr><td>name</td><td>age</td><td>city</td></tr>

當首行被用作表頭時,會轉換為一行 <th> 標籤;此後的每一行都會轉換為一行 <td> 標籤。

使用提示

  • 貼上到 HTML 郵件或不支援 Markdown 的舊版 CMS 時,不帶 thead/tbody 的最簡輸出往往更容易正常顯示。
  • 單元格中的 <>& 會自動轉義為 HTML 實體,因此貼上生成的程式碼不會破壞頁面佈局。
  • 預覽會按瀏覽器實際渲染方式顯示轉換後的表格,方便你在複製程式碼前確認顯示效果。
  • 可與姊妹工具 CSV 轉 Markdown、CSV 轉 JSON 搭配使用,將同一份 CSV 按需轉換為三種不同格式。

常見問題

如果條件允許,建議這樣做,因為它能在語義上區分表頭行與資料行。但在部分郵件客戶端等對 thead/tbody 支援不穩定的環境中,不帶這兩個標籤的最簡標記往往顯示得更穩定。

可以。帶引號的單元格內的逗號和換行符都能被正確解析,因此即使是從 Excel 複製的複雜 CSV 資料,也能在不破壞表格結構的情況下轉換為 HTML。

可以。生成的是標準的 <table> 標記,因此可以直接貼上到 WordPress 的 HTML 編輯模式,或 HTML 郵件的正文中。

不會。所有轉換處理都在瀏覽器中的 JavaScript 內完成,你輸入的 CSV 內容不會被傳輸到任何伺服器。
ツールくん

閒話 ― 為什麼 <table> 標籤至今仍未消失

在上世紀90年代末 Web 發展初期,用 <table> 標籤搭建整個頁面佈局的"表格佈局"曾是主流做法。當時 CSS 的排版能力有限,表格幾乎是實現多欄佈局的唯一實用手段,因此那個年代的 HTML 原始碼中充斥著與表格資料本身毫無關係的 <table> 元素。

如今 CSS 已經成熟,Flexbox 與 Grid 廣泛普及,用表格做佈局早已被視為典型的反模式。但在其本來的用途——表示按行列組織的真實資料——上,<table> 依然是最合適、也最具無障礙訪問優勢的標籤,因為螢幕閱讀器能夠識別並朗讀 <th><td> 之間的對應關係。

將 CSV 內容貼上到部落格文章或郵件通訊中的需求至今依然普遍存在,因為 HTML 郵件無法渲染 Markdown,部分 CMS 也沒有 Markdown 外掛。能一鍵將電子表格結果轉換為 HTML 表格的工具,正好滿足了這種樸素卻長期存在的實際需求。