เครื่องสร้างตารางราคา CSS

โครงสร้างพื้นฐาน

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

กริดสามคอลัมน์แบบ responsive

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit + minmax(240px, 1fr) ให้เลย์เอาต์สามคอลัมน์บนเดสก์ท็อปและการเรียงคอลัมน์เดียวบนมือถือ โดยไม่มีอะไรอื่นต้องตั้งค่า

แพ็กเกจที่ไฮไลต์

สัญญาณภาพที่ดึงความสนใจ:

• ขอบสี ที่เข้ากับสีเน้นของแบรนด์
• ยกขึ้นเล็กน้อย ด้วย margin-top ติดลบ หรือ translateY(-4px)
• ปุ่ม CTA ใหญ่กว่า มักเป็นสีแบรนด์ เทียบกับแบบเส้นขอบสำหรับแพ็กเกจอื่น
• ป้าย (“ยอดนิยม”, “คุ้มค่าที่สุด”) วางตำแหน่งสัมบูรณ์ที่ด้านบน
• อาจสูงกว่า เพื่อดึงสายตา แม้สิ่งนี้อาจทำให้เปรียบเทียบยากขึ้น

อย่าทำทั้งหมดข้างต้น เลือกสองหรือสามอย่าง สัญญาณมากเกินไปจะทำให้ลำดับชั้นแบนราบ

สวิตช์สลับรายเดือน/รายปี

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

สวิตช์มักสลับค่าราคาด้วย JavaScript เล็กน้อย หรือใช้สถานะ :checked บน radio แสดงเปอร์เซ็นต์ส่วนลดหรือเงินที่ประหยัดได้ในป้ายสวิตช์ มันเป็นองค์ประกอบที่โน้มน้าวใจที่สุดในตารางหลายแบบ

การจัดสไตล์แถวฟีเจอร์

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

ใช้เครื่องหมายถูกสำหรับ “รวมอยู่ด้วย” ข้อความสีเทาหรือกากบาทอ่อนสำหรับ “ไม่รวม” อย่าขีดฆ่าข้อความเองโดยไม่ลดคอนทราสต์ ไม่งั้นจะอ่านเป็นการเน้น

คง CTA ให้เด่น

หนึ่ง CTA ต่อแพ็กเกจ สอดคล้องทางสายตาในทุกแพ็กเกจ ข้อความต่างกันในแต่ละแพ็กเกจ (“เริ่มใช้ฟรี”, “อัปเกรดเป็น Pro”, “คุยกับฝ่ายขาย”) ใช้ได้และช่วยนำผู้ใช้ไปยังขั้นตอนที่ถูกต้องจริง ๆ

ทำให้กวาดสายตาได้

ผู้ใช้ไม่ค่อยอ่านตารางราคาจากซ้ายไปขวา พวกเขากวาดราคาก่อน แล้ว CTA แล้วความต่างของฟีเจอร์ ปรับให้เหมาะกับสิ่งนั้น:

1. ชื่อแพ็กเกจ + ราคา ใหญ่ ด้านบนของการ์ด
2. CTA มองเห็นได้โดยไม่ต้องเลื่อนการ์ด
3. รายการฟีเจอร์ ด้านล่าง เน้นความต่างระหว่างแพ็กเกจแทนที่จะวนซ้ำฟีเจอร์ที่เหมือนกันทุกที่

เช็กลิสต์การเข้าถึง

• แต่ละแพ็กเกจเป็น <article> พร้อม <h3> ของตัวเอง
• ป้าย “ยอดนิยม” เป็นป้ายข้อความที่มองเห็นได้ ไม่ใช่สีอย่างเดียว (ผู้ใช้ตาบอดสี)
• ปุ่ม CTA มีข้อความบรรยาย (“เริ่มทดลอง Pro”) แทน “คลิกที่นี่”
• สวิตช์การเรียกเก็บเงินมี aria-pressed หรือความหมายแบบ radio
• การเปลี่ยนราคาเมื่อสลับจะประกาศผ่าน aria-live="polite" หากใช้ JavaScript