Tutorial Membuat Pricing Table (Tabel Harga) Responsif dengan Flexbox CSS

Apakah halaman penjualan Anda sudah optimal?

Salah satu elemen paling krusial dalam website bisnis, jasa, atau SaaS adalah Pricing Table atau Tabel Harga. Tabel ini bukan sekadar daftar angka, melainkan alat psikologis untuk memandu pengunjung memilih paket layanan terbaik.

Banyak pemula menggunakan plugin berat atau tabel HTML kaku (<table>) yang berantakan saat dibuka di ponsel. Di artikel ini, kita akan membangun Pricing Table modern, ringan, dan 100% responsif menggunakan kekuatan CSS Flexbox.

Mengapa Flexbox? Karena Flexbox memungkinkan kita mengatur tata letak elemen secara dinamis—berjajar rapi di desktop, dan tersusun vertikal secara otomatis di layar HP—tanpa kode yang rumit.

---

1. Persiapan Struktur HTML (Semantik & SEO Friendly)

Langkah pertama adalah membuat kerangka. Kita tidak menggunakan tag <table> karena secara semantik, daftar harga bukanlah data tabular, melainkan sekumpulan kartu informasi. Kita akan menggunakan div dan struktur ul (unordered list) agar lebih mudah dibaca oleh crawler Google.

Berikut adalah kode HTML-nya. Salin kode ini ke dalam file .html Anda:

HTML<section class="pricing-section">
    <div class="container">
        
        <!-- Paket Basic -->
        <div class="pricing-card">
            <h3 class="plan-title">Basic</h3>
            <div class="price">Rp 50.000<span class="period">/bulan</span></div>
            <ul class="features">
                <li>✅ 1 Website</li>
                <li>✅ 5 GB Storage</li>
                <li>❌ Support Prioritas</li>
                <li>❌ Domain Gratis</li>
            </ul>
            <a href="#" class="btn-buy">Pilih Paket</a>
        </div>

        <!-- Paket Pro (Best Value) -->
        <div class="pricing-card recommended">
            <div class="badge">Terlaris</div>
            <h3 class="plan-title">Pro Bisnis</h3>
            <div class="price">Rp 150.000<span class="period">/bulan</span></div>
            <ul class="features">
                <li>✅ 5 Website</li>
                <li>✅ 50 GB Storage</li>
                <li>✅ Support Prioritas</li>
                <li>❌ Domain Gratis</li>
            </ul>
            <a href="#" class="btn-buy btn-primary">Pilih Paket</a>
        </div>

        <!-- Paket Enterprise -->
        <div class="pricing-card">
            <h3 class="plan-title">Enterprise</h3>
            <div class="price">Rp 500.000<span class="period">/bulan</span></div>
            <ul class="features">
                <li>✅ Unlimited Website</li>
                <li>✅ Unlimited Storage</li>
                <li>✅ Support VIP 24/7</li>
                <li>✅ Domain Gratis</li>
            </ul>
            <a href="#" class="btn-buy">Hubungi Sales</a>
        </div>

    </div>
</section>

---

2. Styling dengan CSS Flexbox (Inti Tutorial)

Di sinilah “keajaiban” terjadi. Kita akan menggunakan CSS untuk mengubah daftar di atas menjadi kartu yang berdampingan.

Reset dan Container Utama

Pertama, kita atur container agar menggunakan display: flex.

CSS/* Reset sederhana */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.pricing-section {
    background-color: #f4f7f6;
    padding: 50px 20px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex; /* Mengaktifkan Flexbox */
    justify-content: center; /* Posisi di tengah */
    flex-wrap: wrap; /* Agar kartu turun ke bawah jika layar sempit */
    gap: 20px; /* Jarak antar kartu */
    max-width: 1200px;
    width: 100%;
}

Desain Kartu (Pricing Card)

Kita buat kartunya terlihat elegan dengan bayangan (box-shadow) dan transisi halus.

CSS.pricing-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    width: 300px; /* Lebar dasar kartu */
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    position: relative;
    border: 1px solid #eee;
}

.pricing-card:hover {
    transform: translateY(-10px); /* Efek melayang saat di-hover */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

Tipografi dan Detail Elemen

Mengatur font agar mudah dibaca (readability) adalah kunci UX yang baik.

CSS.plan-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
}

.period {
    font-size: 1rem;
    color: #888;
    font-weight: normal;
}

.features {
    list-style: none;
    margin-bottom: 30px;
    text-align: left;
    padding-left: 20px; /* Sedikit indentasi */
}

.features li {
    margin-bottom: 10px;
    color: #666;
}

.btn-buy {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #3498db;
    color: #3498db;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-buy:hover {
    background: #3498db;
    color: white;
}

---

3. Teknik “Highlight” Kartu Pilihan (Best Value)

Dalam strategi marketing, kita selalu ingin menonjolkan satu paket (biasanya yang tengah). Kita akan memanipulasi kartu dengan class .recommended agar terlihat lebih besar dan berwarna.

CSS/* Menonjolkan kartu tengah */
.pricing-card.recommended {
    border-top: 5px solid #3498db;
    transform: scale(1.05); /* Sedikit lebih besar */
    z-index: 1; /* Agar tampil di atas kartu lain */
}

/* Mengatur ulang hover untuk kartu recommended */
.pricing-card.recommended:hover {
    transform: scale(1.08) translateY(-5px);
}

/* Badge 'Terlaris' */
.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #e74c3c;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Tombol Solid untuk Recommended */
.btn-primary {
    background: #3498db;
    color: white;
}

---

4. Membuatnya Responsif (Mobile Friendly)

Berkat properti flex-wrap: wrap pada langkah ke-2, sebenarnya tabel ini sudah cukup responsif. Namun, kita perlu memastikan bahwa pada layar HP, kartu “Recommended” tidak lagi di-scale up (karena akan memakan tempat) dan marginnya rapi.

Gunakan Media Query berikut:

CSS@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Ubah jadi susunan vertikal */
        align-items: center;
    }

    .pricing-card {
        width: 100%; /* Penuhi lebar layar HP */
        max-width: 350px;
        margin-bottom: 20px;
    }

    /* Matikan efek scale pada mobile agar rapi */
    .pricing-card.recommended {
        transform: scale(1);
    }
    
    .pricing-card.recommended:hover {
        transform: translateY(-5px);
    }
}

---

Penjelasan Logika & Tips Optimasi

Agar artikel ini tidak dianggap Low Value Content, berikut adalah pemahaman teknis mengapa kode di atas efektif:

1. Flexbox vs Float: Metode lama menggunakan float: left sering menyebabkan masalah layout breaking dan memerlukan teknik clearfix. Flexbox menyelesaikan masalah distribusi ruang (justify-content) dan urutan elemen dengan sangat bersih.
2. Conversion Rate Optimization (CRO): Penggunaan class .recommended dengan ukuran lebih besar (scale: 1.05) memanfaatkan bias kognitif manusia yang cenderung memilih opsi yang paling menonjol secara visual.
3. Kecepatan (PageSpeed): Tabel harga ini murni CSS. Tidak ada permintaan HTTP tambahan untuk gambar background atau file JavaScript, sehingga skor Core Web Vitals (LCP & CLS) Anda akan tetap hijau.

Kesimpulan

Membuat Pricing Table yang profesional tidak harus rumit. Dengan Flexbox CSS, Anda bisa membuat desain yang fleksibel, mudah dikustomisasi, dan yang terpenting: enak dilihat di semua perangkat.

Pastikan Anda mengubah warna (#3498db, #e74c3c) sesuai dengan branding website Anda agar terlihat menyatu.

Ingin mencoba? Silakan copy-paste kode di atas ke dalam editor teks Anda dan lihat hasilnya langsung di browser!