Tables Generator 線上製作產生表格 HTML、LaTeX、Markdown 原始碼

如果有接觸過網頁設計或曾經嘗試在網站、部落格放入表格，應該會覺得表格（Tables）是一個非常難搞的東西，不但原始碼複雜，沒有所見即所得編輯器似乎也很難直接寫出來，而在瀏覽器上使用的網頁編輯器又很難修改表格內容，有時候從其他文書處理工具直接複製貼上就會自帶很多用不到的程式碼，程式碼看起來很髒又無法符合當前的頁面風格，總之表格一直是很多人的痛，我也很少在網頁中用到表格，不過表格還是呈現一些數據相當好的方式。

若你要在網頁上用到表格語法，本文要介紹的「Tables Generator」會對你有幫助，這是一款線上表格語法產生器，可產生 LaTeX、HTML、純文字、Markdown 和 MediaWiki 表格語法，是個非常方便好用的工具。

這個表格產生器內建所見即所得編輯器，使用者可匯入資料，或是直接從其他來源像是 Google Docs、LibreOffice、網頁複製貼上表格內容，也能在網站中編輯表格欄位，最終產生適合使用的程式碼。Tables Generator 適合不熟悉 HTML、CSS 的朋友使用，如果你想為網站或是部落格（WordPress、Drupal 或任何支援 HTML 程式碼的平台）加入表格，那麼可以透過這個工具產生程式碼。

網站名稱：Tables Generator
網站鏈結：https://www.tablesgenerator.com/

使用教學

STEP 1

開啟 Tables Generator 網站，從上方選單選擇要產生的原始碼類型，前面有提到網站支援的語法包括 LaTeX、HTML、純文字、Markdown 和 MediaWiki。

STEP 2

如果你的表格是 .csv 檔案，可點選上方的「Import CSV file…」快速匯入資料，或將表格資料貼上等等，依照使用者切換的語法類型不同，也會顯示不一樣的功能選單。

主要的表格功能也可以從上方選單選取，包括新增、插入欄位、刪除欄位，文字樣式相關設定也能從編輯器上方功能列找到。

STEP 3

Tables Generator 最大優勢是可直接在網頁中編輯表格內容，包括各個欄位的文字、數值等等，編輯完成後點選下方「Generate」就會產生對應程式碼，預設情況下會帶入 CSS 樣式表，如果不需要（或是網頁部落格本身就有相關樣式）勾選 Do not generate CSS 就不會產生樣式程式碼。

STEP 4

最後，複製 Tables Generator 產生的原始碼貼到網頁或部落格就能看到表格效果，下方還有一些功能像是讓表格支援自適應設計、表格水平置中、第一個欄位是表格表頭（Table header）、啟用表格排序，勾選會即時更新上方的原始碼。