最後更新：2026/10/13
瑜珈教室的單堂、月卡、季卡，補習班的單科、全科，工作室的基本、進階、全包方案。只要你賣的東西有好幾個方案，網站上就需要一張價目表。
很多新北的店家會把價目表做成一張圖片放上去，做起來最快，卻有三個問題：改價格要重做圖、手機上字太小要放大才看得清楚、搜尋引擎讀不到圖片裡的價格。這篇用 HTML 和 CSS 做一個三欄的方案價目表，寬螢幕排成一列方便比較，手機自動變成上下一欄。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress。我想照下面這篇文章，做一個三欄的方案價目表，手機上會自動排成一欄。
請先問我：我的方案名稱、價格、各方案包含哪些項目、最想推薦哪一個。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
先決定內容，再做樣子
價目表做得好不好，八成取決於內容的安排，CSS 只是把它排整齊。動手之前先想清楚四件事：
方案數量：三個最剛好。 兩個方案，客人只能二選一；四個以上，比較起來太累，很容易乾脆不選。三個方案也讓中間那個自然成為「不會太少、也不會太貴」的選項。
方案名稱：寫給誰用，不只寫等級。 「基本、進階、專業」聽不出差別。每個方案下面加一句「適合誰」，例如「第一次來，想先試試看」、「一週上 2～3 堂，養成習慣」，客人很快就能對號入座。
比較項目：每個方案列一樣的項目、一樣的順序。 不包含的項目也列出來，用灰色和橫線表示。客人一眼就能看出「多花的錢多了什麼」。
推薦方案：只標一個。 你最希望客人選的那一個，用底色、標籤、按鈕顏色和其他方案區分開。標籤寫「最多人選」、「推薦」都可以，但要是真的，不要每個方案都標。
HTML：放在「自訂 HTML」區塊
在頁面上新增一個「自訂 HTML」區塊，貼上下面這段，再把文字和價格換成你的方案：
<div class="price-table">
<div class="plan">
<h3>單堂體驗</h3>
<p class="for">第一次來，想先試試看</p>
<p class="price">NT$ 450 <small>／堂</small></p>
<ul>
<li>任選一堂團體課</li>
<li>免費借瑜珈墊</li>
<li class="no"><span class="sr-only">不含：</span>線上預約保留名額</li>
<li class="no"><span class="sr-only">不含：</span>老師一對一調整</li>
</ul>
<a class="btn" href="/booking/?plan=trial">預約體驗</a>
</div>
<div class="plan featured">
<span class="tag">最多人選</span>
<h3>月卡</h3>
<p class="for">一週上 2～3 堂，養成習慣</p>
<p class="price">NT$ 2,800 <small>／月</small></p>
<ul>
<li>團體課不限堂數</li>
<li>免費借瑜珈墊</li>
<li>線上預約保留名額</li>
<li class="no"><span class="sr-only">不含：</span>老師一對一調整</li>
</ul>
<a class="btn" href="/booking/?plan=month">選月卡</a>
</div>
<div class="plan">
<h3>季卡</h3>
<p class="for">已經上癮，想省一點</p>
<p class="price">NT$ 7,500 <small>／3 個月</small></p>
<ul>
<li>團體課不限堂數</li>
<li>免費借瑜珈墊</li>
<li>線上預約保留名額</li>
<li>每月一次老師一對一調整</li>
</ul>
<a class="btn" href="/booking/?plan=season">選季卡</a>
</div>
</div>
<p class="price-note">價格皆含稅。月卡、季卡從第一次上課那天開始算。</p>不包含的項目加上 class="no"。每一項前面那個看不見的「不含：」是給螢幕報讀軟體的：視障的訪客聽不到灰色和橫線，靠這兩個字才知道這一項不在方案裡。
每個方案的按鈕連到預約或聯絡頁面，網址後面帶上 ?plan=trial 這樣的參數。預約或聯絡表單可以讀取這個參數，自動帶入客人選的方案（常見的表單外掛多半有這個功能），客人就不用再選一次。想知道每個方案的按鈕各被點了幾次，可以搭配〈GA4 追蹤電話和按鈕點擊〉的做法。
CSS：放在附加的 CSS
CSS 放在「外觀 > 自訂 > 附加的 CSS」；區塊佈景主題沒有這個選單，改到「外觀 > 編輯器 > 樣式」裡的「附加的 CSS」：
/* 價目表：寬度夠就排成一列，手機自動變成一欄 */
.price-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
max-width: 1040px;
margin: 0 auto;
align-items: start;
}
.plan {
position: relative;
padding: 28px 24px;
background: #fff;
border: 2px solid #1d1d1f;
border-radius: 20px;
}
.plan h3 { margin: 0 0 4px; font-size: 1.25rem; }
.plan .for { margin: 0 0 16px; color: #555; font-size: .95rem; }
.plan .price { margin: 0; font-size: 2rem; font-weight: 700; }
.plan .price small { font-size: .9rem; font-weight: 400; }
.plan ul { margin: 20px 0; padding: 0; list-style: none; }
.plan li { padding: 6px 0 6px 28px; border-bottom: 1px dashed #ddd; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 4px; color: #2e7d32; font-weight: 700; }
.plan li.no { color: #999; }
.plan li.no::before { content: "－"; color: #bbb; }
/* 畫面上看不到、但螢幕報讀軟體會唸出來的字 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plan .btn {
display: block; padding: 12px; border-radius: 999px; text-align: center;
border: 2px solid #1d1d1f; color: #1d1d1f; text-decoration: none; font-weight: 700;
}
/* 推薦方案：底色、標籤、按鈕顏色都不一樣 */
.plan.featured { background: #fff710; box-shadow: 6px 6px 0 #1d1d1f; }
.plan.featured .btn { background: #1d1d1f; color: #fff; }
.plan .tag {
position: absolute; top: -14px; left: 24px; padding: 2px 12px; border-radius: 999px;
background: #1d1d1f; color: #fff; font-size: .85rem;
}
.price-note { max-width: 1040px; margin: 16px auto 0; color: #555; font-size: .9rem; }排版的關鍵是第一段的 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))。意思是「每一欄至少 240 像素寬，放得下幾欄就排幾欄，剩下的空間平均分」。螢幕夠寬就排成三欄；平板寬度變成兩欄加一欄；手機只放得下一欄，三個方案就上下排。不用另外寫手機版的規則。
推薦方案的標籤用 position: absolute 讓它跨在卡片的上邊框，top: -14px 把它往上提一半的高度。推薦方案用黃色底、右下角的實心陰影和黑色按鈕，和另外兩張白卡片拉開差別。顏色換成你的品牌色就好，原則是推薦方案的對比要最強。
align-items: start 讓三張卡片各自照內容決定高度。如果你希望三張卡片一樣高、按鈕對齊在同一條線上，可以拿掉這一行，再讓卡片內部用 flex 把按鈕推到底部。
我們在電腦（1280 像素寬）、平板（760）、手機（390）三種寬度測過：三欄、兩欄加一欄、一欄，都沒有出現左右捲動；再把同一段貼進 WordPress 測試站的頁面，佈景主題的樣式沒有把它弄亂。
方案多、細節多的時候
如果每個方案的說明很長，三欄並排會讓卡片變得又窄又長。這時候可以改用「頁籤」：上面三個方案名稱，點哪一個，下面就顯示那個方案的完整內容。MIMI 首頁的製作費用參考就是這樣做的，三種網站各自有一頁說明，不用擠在一起比。
不管哪一種排法，都記得在價目表下方寫清楚「價格是否含稅」、「月卡從哪一天開始算」這類規則。比起價格，客人更怕付了錢才發現有沒寫清楚的條件。
價目表是在幫客人做決定
好的價目表會讓客人覺得「我知道該選哪一個」，而不是「我得研究一下」。方案說清楚、差別看得見、下一步的按鈕就在眼前，詢問和報名自然會變多。
如果你想把網站的方案、價格和報名流程一起規劃，可以先看〈網站有人看卻沒人聯絡？〉，再看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，形象網站、會員網站都能把方案和報名做進網站裡。MIMI 提供新北網頁設計服務，新北的教室、工作室可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
