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 表格的工具,正好滿足了這種樸素卻長期存在的實際需求。