WordPress 表格美化

WordPress 表格美化怎麼做？3 種方法＋免寫 CSS 一鍵產生器

內容目錄 顯示
加入為 Google 偏好來源

WordPress 內建表格已有預設與斑馬紋樣式，也能調整文字、背景色、內距與邊框；實際可見設定會受版本及佈景主題影響。若你想把標題列配成品牌色，或細調圓角與每列外觀，可以先試內建設定，再考慮額外樣式。

這篇先說明內建表格可以設定什麼，再比較三種進階做法：手寫 CSS、表格外掛與樣式產生器，並帶你把產生器輸出的樣式套到原生表格。完成後還要在桌機與手機預覽，核對文字、欄寬與捲動。

先試內建表格設定，再決定是否加樣式

選取表格區塊後，可在右側設定開啟標題列或頁尾列，選擇預設或斑馬紋樣式，並調整可用的顏色、字體、內距與邊框控制。WordPress 官方表格文件也說明最終外觀可能隨佈景主題不同；因此要在前台預覽，而不是只看編輯器。

內建設定不足時，才需要額外樣式。使用 CSS 時，要確認選擇器限定在預期的表格；若多張表格共用同一個 class，樣式會一起套用。以下比較三種進階做法，幫你依維護需求選擇。

內建設定以外的 3 種表格美化做法

做法一：自己手寫 CSS

最直接的做法是自己寫一段 CSS，貼進佈景主題的自訂樣式區，或文章裡的「自訂 HTML」區塊。彈性最大，想要什麼效果都做得出來。代價是你得懂 CSS：要知道 th 是標題格、td 是內容格、nth-child 怎麼做斑馬紋，還要懂得用一個專屬的 class 把樣式限定在這個表格，否則容易改了一個表格，整站的表格跟著變。對沒有寫程式經驗的人來說，門檻偏高。

做法二：裝專門的表格外掛

市面上有專門做表格的外掛，提供現成的樣式範本，點一點就能套用。好處是不用寫 CSS，缺點是要額外安裝，學它自己的操作介面，並需要評估更新維護、相容性與實際載入資源；效能影響要依該工具及網站測量。如果你只是偶爾需要美化幾個表格，為此裝一個外掛可能划不來。

做法三：用工具產生樣式，貼上就好

第三種做法是用一個「樣式產生器」：你在畫面上挑顏色、選要不要斑馬紋、調圓角，工具就幫你把對應的 CSS 寫好，你複製貼上即可。它結合了前兩種的優點，既有手寫 CSS 的彈性，又不需要你真的會寫，也不必為此多裝外掛。這正是秒站內建的做法。

該選哪一種？

簡單對照一下：如果你本來就會寫 CSS，又想要完全客製，手寫最自由；如果你經常要做大量風格各異的表格，專門外掛的範本庫可能省事；若只是調整內建選項以外的外觀，樣式產生器可以減少手寫 CSS 的步驟，但輸出的樣式仍需載入並驗證。下面就示範這個做法。

不會寫 CSS 也能做：表格樣式產生器

秒站的教學文件裡放了一個「表格樣式產生器」，把上面說的第三種做法直接做成可以操作的工具。你在左邊調整想要的外觀，右邊即時看到預覽，調到滿意後按一下複製，就能拿到一段現成的樣式。

它把最常見的需求都做成選項，包括：

  • 標題列要不要顯示，以及標題列的背景色與文字色
  • 內容文字的顏色與格線的顏色
  • 要不要隔列換底色（斑馬紋），以及斑馬紋的顏色
  • 文字對齊方式，以及表格四角要不要圓角

產生器複製的是 <style> 樣式，不會一併建立可編輯的表格。先用原生「表格」區塊建立內容，再將產生器的樣式名稱填入表格「進階設定 → 附加的 CSS 類別」，最後把樣式貼進秒站的「自訂程式碼」區塊並更新。名稱必須一致；若只想改一張表格，請使用與其他表格不同的 class。完整步驟見表格樣式產生器教學。

如果你想要的效果產生器沒有涵蓋，例如標題列漸層、滑鼠移上去整列變色、手機上字級自動縮小等效果，那篇教學裡也附了一段現成的 AI 提示詞，貼給 AI，改一下需求描述，可以取得樣式草稿。貼上前確認選擇器只涵蓋預期的 class，再於前台檢查桌機與手機；若無效果，先查名稱是否一致、樣式是否保留，以及主題樣式是否覆蓋。

表格美化的幾個小原則

不管用哪種做法，把握幾個原則，表格會更耐看，也更好讀：

  • 對比要夠，但別太花：標題列用品牌色當底，搭白字，內容區維持淺色，層次就出來了。顏色控制在兩到三種以內，整體會更乾淨。
  • 用斑馬紋幫助閱讀：欄列較多時，隔列換一個很淡的底色，視線比較不會跑掉，尤其在手機上更明顯。
  • 留白比裝飾重要：把每一格的內距（padding）拉開一點，比加一堆邊框線更能讓表格好讀。
  • 顧到手機：欄位太多的表格在手機上會擠成一團，建議欄數控制在 4 欄以內，或讓表格在小螢幕上可以左右捲動。

表格只是其中一個例子

表格美化這件小事，其實反映了用秒站架站的一個特點：很多在傳統 WordPress 上需要寫程式、裝外掛、查教學才能做到的細節，秒站都先幫你準備好了。從用 AI 描述需求就能生出整頁版面的 Vibe 畫布，到表格、按鈕、區塊這類細節的調整，目標都是讓不會寫程式的人也能把網站做得既好看又好維護。

你可以使用內建設定或產生器處理常見外觀，減少手寫 CSS。完成後確認樣式範圍、保存結果與手機閱讀，才算套用完成。

用秒站打造你的網站

如果你正在找一個不用寫程式，也能做出細節到位網站的方式，秒站值得試試：

延伸閱讀

秒站現在不只是一套版型。你可以從現成架構快速開始，用頁面編輯器以拖曳和複製區塊的方式調整版面；需要更高自由度時，也能和 AI 協作，把自製頁面放進 Vibe 畫布。上線速度與設計自由不必二選一。

分享此文章：

相關文章