Generator Tabel Harga CSS

Kerangka struktur

<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>

Grid tiga kolom yang responsif

.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);
}

Kombinasi auto-fit + minmax(240px, 1fr) menghasilkan tata letak tiga kolom di desktop dan tumpukan satu kolom di perangkat seluler, tanpa konfigurasi tambahan apa pun.

Paket unggulan

Isyarat visual yang menarik perhatian:

• Bingkai berwarna yang selaras dengan warna aksen merek.
• Sedikit terangkat, lewat margin-top negatif atau translateY(-4px).
• Tombol CTA lebih besar, biasanya solid dengan warna merek, sementara paket lain memakai tombol beroutline.
• Label (“Paling populer”, “Nilai terbaik”) diposisikan absolut di bagian atas kartu.
• Kartu lebih tinggi, untuk menarik pandangan, walau ini bisa menyulitkan perbandingan.

Jangan pakai semuanya sekaligus, cukup dua atau tiga. Terlalu banyak isyarat justru meratakan hierarki visual.

Sakelar bulanan / tahunan

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

Sakelar ini biasanya menukar nilai harga lewat sedikit JavaScript, atau memakai status :checked pada input radio. Tampilkan persentase diskon atau nilai penghematannya (misalnya “Hemat Rp 240.000/tahun”) pada teks sakelar: elemen ini sering menjadi pemicu paling persuasif di seluruh tabel.

Gaya baris fitur

.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;
}

Pakai tanda centang untuk fitur yang “termasuk”, dan teks abu-abu atau tanda silang tipis untuk yang “tidak termasuk”. Jangan mencoret teks tanpa menurunkan kontrasnya, karena coretan tebal justru terbaca sebagai penekanan.

Jaga CTA tetap menonjol

Satu CTA per paket, konsisten secara visual di semua paket. Teks yang berbeda per paket (“Mulai gratis”, “Naik ke Pro”, “Hubungi tim sales”) justru bagus dan membantu mengarahkan pengguna ke alur yang tepat.

Buat agar mudah dipindai

Pengguna jarang membaca tabel harga dari kiri ke kanan; mereka memindai harga dulu, lalu CTA, baru perbedaan fitur. Optimalkan untuk pola itu:

1. Nama paket + harga berukuran besar di bagian atas kartu.
2. CTA terlihat tanpa perlu menggulir kartu.
3. Daftar fitur di bawahnya. Tonjolkan perbedaan antarpaket, bukan mengulang fitur yang sama di setiap kolom.

Daftar periksa aksesibilitas

• Setiap paket adalah sebuah <article> dengan <h3> miliknya sendiri.
• Label “Paling populer” berupa teks yang terlihat, bukan sekadar warna (demi pengguna buta warna).
• Tombol CTA memakai teks deskriptif (“Mulai uji coba Pro”), bukan “Klik di sini”.
• Sakelar penagihan memakai aria-pressed atau semantik input radio.
• Perubahan harga saat sakelar ditekan diumumkan lewat aria-live="polite" bila diterapkan dengan JavaScript.