表格樣式怎麼改？線上產生器一鍵複製＋AI 生成 CSS 教學

WordPress 內建的表格只有最基本的外觀，想把標題列換成品牌色、加上隔列換底色（斑馬紋），或是把格線改細，往往找不到設定的地方。這篇教你兩種做法：先用文章裡的「表格樣式產生器」調一調、複製代碼貼上就完成（一般方法）；如果要更細緻的效果，再用 AI 幫你生成 CSS（進階方法）。

兩種方法的共同原理是「幫表格加一個專屬的 CSS class，再針對這個 class 寫樣式」，這樣樣式只會作用在這一個表格，不會影響頁面上其他表格。產生器已經幫你把這件事處理好，下面先把原理講清楚，再進入操作。

先懂原理：為什麼要幫表格加一個專屬 class#

如果直接寫 table { ... } 這種樣式，會套到整個網站的每一個表格，很容易牽一髮動全身。正確做法是給你要美化的那個表格一個獨一無二的名字（CSS class），例如 my-table，然後所有樣式都以這個名字開頭，例如 .my-table th、.my-table td。如此一來，樣式被限定在這個範圍內，其他表格完全不受影響。

下面的產生器已經幫你把這個範圍限定處理好了，你只要調整想要的外觀，它就會輸出一段樣式。你用 WordPress 原生的「表格」區塊做好表格內容、填上 class，再把這段樣式貼進「自訂 HTML」區塊，表格就會套上設計好的外觀。

一般方法：用表格樣式產生器，調一調就複製#

在下方工具左側調整選項，右側會即時顯示預覽。調到滿意後，按「複製」把樣式複製起來。接著的步驟很單純：用「表格」區塊做好你的表格、在表格的「附加的 CSS 類別」填上產生器裡的 class 名稱（預設 my-table），再新增一個「自訂 HTML」區塊把樣式貼進去，表格就完成了。

把樣式套到表格：3 個步驟#

產生器輸出的是一段樣式（<style>）。表格本體由你用 WordPress 原生的「表格」區塊建立，這樣表格內容仍然可以直接在編輯器裡編輯；樣式則透過 class 套上去。整個流程 3 步。

步驟 1：用「表格」區塊做好表格#

在文章編輯器按「＋」新增區塊，搜尋「表格」並點選，設定欄數與列數後建立，把內容填好。

步驟 2：在表格填上 class#

點選你的表格區塊，在右側設定面板最下方的「進階設定」展開，把產生器裡的 class 名稱（預設 my-table）填進「附加的 CSS 類別」欄位。這個名稱要和產生器裡的一致，樣式才對得上。

步驟 3：貼上產生器的樣式#

在表格下方（或文章任一處）新增一個「自訂 HTML」區塊，把產生器複製的樣式貼進去，更新或發佈文章，表格就會套上設計好的外觀。樣式放在同一篇文章內即可生效，位置不限。

如果套用後沒有效果，最常見的原因是表格的「附加的 CSS 類別」沒填、或填的名稱和產生器裡的不一致，回到步驟 2 確認即可。

進階方法：用 AI 生成更客製的表格樣式#

產生器涵蓋最常見的需求。如果你想要更細緻的效果，例如標題列漸層、滑鼠移上去整列變色、特定欄位強調、手機上自動縮小字級等，可以把需求交給 AI。下面這段 prompt 已經幫你把「限定範圍，不影響其他表格」的規則寫好，你只要改掉裡面的需求描述，複製貼到你慣用的 AI（Claude、ChatGPT、Gemini 都可以），它就會回給你一段樣式。

複製這段 prompt，貼到你的 AI#

你是一位精通 CSS 的網頁設計師。我在 WordPress 文章裡有一個表格，想客製它的外觀。

請依照下列需求，幫我寫出一段可直接使用的程式碼，並用 <style> 標籤包起來，讓我可以貼進 WordPress 的「自訂 HTML」區塊。

【重要限制】
1. 我會幫表格加上一個專屬的 CSS class：my-table（如果我另外指定名稱，就用我指定的）。樣式請只用 <style> 包起來，不要附帶表格 HTML。
2. 我會在「表格」區塊的「附加的 CSS 類別」填上 my-table（這個 class 會套在表格外層的 figure 上），所以所有 CSS 選擇器都必須寫成 .my-table table 開頭，例如 .my-table table th、.my-table table td，這樣才會作用到表格、也不會影響頁面上其他表格。

【我想要的樣式】（請依我的描述調整，沒提到的用你的專業判斷）
- 標題列是否顯示：要顯示
- 標題列背景色：深藍 #0A6EB1
- 標題列文字色：白色
- 內容文字色：深灰 #333333
- 隔列換底色（斑馬紋）：要，淺灰 #f5f7fa
- 格線：細的淺灰色
- 文字對齊：靠左
- 其他想要的效果：四角稍微圓角、滑鼠移到該列時底色加深、手機上字級自動縮小

【輸出格式】
只輸出一段完整的 <style>...</style>，不要其他說明文字，方便我直接複製貼上。

把 AI 給的樣式貼進自訂 HTML，並填上 class#

AI 會回給你一段 <style>...</style>。做法跟前面的產生器完全一樣：用「表格」區塊做好表格，在「附加的 CSS 類別」填入 prompt 裡用的 class 名稱（預設是 my-table），再新增一個「自訂 HTML」區塊把這段樣式貼進去，表格就會套上效果。

使用時要注意的幾件事#

• class 名稱要獨一無二：同一篇文章如果有多個表格要套不同樣式，請各自取不同的 class 名稱（例如 price-table、spec-table），避免互相覆蓋。
• 樣式只作用在指定的表格：因為所有規則都以你的 class 名稱開頭，頁面上沒有掛這個 class 的表格不會被改到，可以放心使用。
• 手機顯示：欄位較多的表格在手機上可能放不下，建議欄數控制在 4 欄以內，或在 AI prompt 裡加上「手機上可左右捲動」的需求。
• 沒效果？先檢查 class 有沒有填：貼了樣式卻看起來沒變化，最常見的原因就是表格區塊的「附加的 CSS 類別」沒填、或填的名稱和樣式裡的不一致。確認兩邊名稱一樣即可。

下一步：想把整個版面排得更有層次，可以接著看進階版面區塊：用 Row/Columns Advanced 與 Box Container 排版，搭配這篇的表格樣式，整篇文章的視覺會更完整。

延伸閱讀#

• 新增與編輯文章：從零到發佈的最小流程
• 進階版面區塊：用 Row/Columns Advanced 與 Box Container 排版
• 進階內容區塊：標題、按鈕、圖示、圖片、影片一次補齊