【網站經營】用 Tables Generator 輕鬆建立 HTML、LaTeX、Markdown 表格

表格 (Tables) 對於建立資料邏輯的幫助非常大，像是網站、部落格 (痞客邦、Google Blogger) 都需要表格來呈現數據及內容。如果你需要一套免費、輕鬆、好上手的網頁表格工具，還能支援多種網頁語法，Tables Generator 肯定是你最好的選擇！

為什麼推薦 Tables Generator？

正式介紹 Tables Generator 如何使用前，先分享一下最值得推薦的三個理由！

1 - 免費的線上工具

Tables Generator 是完全免費的線上工具，不用註冊會員就能開始製作表格，而且表格語法也能直接複製出來使用。(如果覺得好用，可以點擊廣告來支持他們)

2 - 製作表格所見即所得

使用者介面非常清爽好上手，完全不需要任何語法知識，可支援從 Microsoft Office、Libre Office、Google 文件或試算表裡貼上內容，也能將 CSV 格式檔案匯入使用。

3 - 支援多種常用語法

除了製作常用的 HTML 表格外，Tables Generator 還能將表格轉譯成 LaTeX、Text、Markdown、MediaWiki 等多種格式，同時滿足多種不同需要。

▲ 使用者介面非常清爽，表格製作所見即所得

如何使用 Tables Generator？

快速展示一下 Tables Generator 的使用邏輯，讓大家都能輕鬆上手！

1 - 先選定語法格式

使用 Tables Generator 建議先從「語法格式」設定開始，雖然它可以讓使用者隨時切換，但轉譯成不同語法可能會讓表格外觀受到影響。(語法差異所造成)

▲ 先選定語法格式，避免切換造成外觀受到影響

2 - 建立 (匯入) 表格

你可以利用下列任何一種方式來建立表格：

(1) 在 Tables Generator 裡建立全新表格 (Table > Set size)
(2) 匯入 CSV 格式來建立表格 (File > Import CSV file)
(3) 直接將表格內容複製貼上

▲ 設定格數來建立所需要的表格

▲ 匯入 CSV 檔案能更有效地導入資料

▲ 也能直接複製貼上現有表格

3 - 微調表格內容

如果建立或貼上內容後，表格外觀跟理想中還有些差距，可以針對「文字」、「背景」、「框線」逐項做調整，「欄位寬度」也能透過手動拖曳來做微調。

▲ 調整外觀及間距來讓表格更美觀

Tables Generator 還提供了一些懶人主題包，直接套用主題外觀 (Theme) 就能做出質感表格，接續再依個人喜好做些微調。

▲ 套用主題外觀 (Theme) 就能讓表格質感更好

表格轉譯成 HTML 等語法格式後，除了外觀會跟我們在 Microsoft Office 或 Google 文件略有不同，表格內容呈現起來也會受到影響，善用間距 (Cell Spacing) 就能消弭掉一些擁擠感。

▲ 善用間距 (Cell Spacing) 來消弭掉擁擠感

4 - 使用表格語法

雖然 Tables Generator 在「所見即所得」已有不錯的表現，但還是建議在使用語法前，可以透過預覽 (Preview) 的方式來確認表格無誤。

▲ 可以用預覽功能再次確認表格無誤

在確認無誤後，就能拷貝表格語法來使用，像 HTML 表格就有提供完整的 CSS 外觀。如果只需要基本表格模式，可以透過勾選來移除 CSS 樣式。

▲ 設計完成後，就能拷貝表格語法來使用

使用心得 & 補充

Tables Generator 的使用介面簡單且功能齊全，對於那些不提供表格功能的部落格系統，像：痞客邦、Google Blogger，就可以輕鬆將表格內容轉換為 HTML 語法帶入。

如果有需要做表格轉換，也別忘了它有支援 LaTeX、HTML、Text、Markdown、MediaWiki 這麼多種語法喔！

▲ Tables Generator 幫你輕鬆轉換表格內容

延伸閱讀：

【網站經營】如何設定新版 Google Analytics 4 property？
【網站經營】利用 web.dev 測量工具幫網站健檢，找出 SEO 及使用者體驗問題
【網站經營】究竟用短連結來轉址，會不會傷害到網站 SEO？
【網站經營】部落客別再癡癡等業配，趕緊用 Google AdSense 創造被動收入
【網站經營】快速解答 Google AdSense 常見疑問
【網站經營】內容網站、部落格首選 Google Blogger
【網站經營】套用版型讓 Google Blogger 外觀超專業
【網站經營】Google Blogger 文章圖片無痛轉換 WebP 格式

-------------------------------

更多內容，歡迎關注『布蘭特大叔』

部落格：https://bit.ly/UB-WebSite
FB 專頁：https://bit.ly/UB-FB
YouTube 頻道：https://bit.ly/UB-YouTube