10 Cuplikan CSS Gratis untuk Membuat Tabel Harga Responsif

Halaman harga adalah pokok untuk setiap toko online. Ini digunakan untuk produk SaaS, perusahaan layanan, dan toko eCommerce di seluruh web.

Dan tidak ada halaman harga yang lengkap tanpa tabel harga yang membandingkan opsi, fitur, dan harga (tentu saja). Tetapi mendesain sendiri dari awal bisa merepotkan.

Di situlah tabel harga open source ini dapat membantu. Ini semua sepenuhnya responsif, dan berfungsi dengan baik sebagai templat, baik Anda ingin menyesuaikan sendiri atau hanya menggunakan kembali kode yang ada untuk menghemat waktu.

1. Tabel Ikon oleh Travis Williamson

Visual yang bagus selalu menjual. Ini mungkin foto produk atau ilustrasi khusus tetapi visual menarik perhatian lebih cepat daripada teks.

Tabel harga ikon ini adalah contoh yang sangat baik dari apa yang mungkin dengan kolom tabel visual. Dengan menambahkan ikon, Anda dapat memberi tahu pelanggan apa yang mereka dapatkan dengan setiap paket bahkan sebelum mereka membaca apa pun. Ikon menampilkan berbagai kekuatan dan fitur. Rencana terkecil memiliki pesawat kertas, sedangkan rencana terbesar menggunakan kapal roket penuh. Bicara tentang kontras!

Lihat Pena
Tabel Harga oleh Travis Williamson (@travisw)

2. Zebra Striping w/ Warna oleh Agustin Ortiz

Contoh ini memiliki tabel harga yang lebih sederhana dan mengikuti aturan desain yang lebih konvensional. Ini menggunakan garis zebra, tajuk harga besar, dan berbagai warna untuk membantu satu format penetapan harga tertentu menonjol dari yang lain.

Warnanya bisa terasa sedikit kuat, jadi tidak sempurna untuk setiap tata letak. Tetapi Anda dapat dengan mudah mengubah warna dan tetap mempertahankan format yang sama agar tabel harga ini berfungsi di situs Anda sendiri.

Lihat Tabel Harga Pena | Tabla de Precios oleh Agustin Ortiz

3. Meja Ungu Gelap oleh Mike Torosian

Untuk desain meja yang lebih gelap dan kaya, lihat tabel harga ungu ini. Ini menggunakan gradien latar belakang, dan efek hover batas untuk membuat salah satu tabel harga paling profesional di web. Ini juga sepenuhnya responsif, sehingga elemen tabel dipecah menjadi baris saat browser semakin kecil.

Lihat Tabel Harga Pena oleh Mike Torosian

4. Harga Profesional oleh LittleSnippets

Situs web B2B sering kali mencari desain yang lebih profesional yang jauh dari skema warna kreatif dan ikon asing. Desain penetapan harga ini adalah salah satu contoh yang mengikuti skema warna khas nuansa gelap dan terang.

Satu kolom harga menggunakan sorotan biru tua untuk melompat keluar dari tabel lainnya. Ini adalah praktik standar untuk mengikuti teknik ini karena dapat menghasilkan tingkat konversi yang lebih tinggi. Itu sebabnya rencana "profesional" juga menggunakan bayangan jatuh untuk muncul di atas kolom lainnya. Tetapi ketika diubah ukurannya menjadi lebih kecil, itu jatuh ke dalam formasi tumpukan untuk penelusuran yang lebih mudah.

Lihat Pena #1214 – Tabel harga oleh LittleSnippets

5. Tabel Dengan Efek Melayang oleh Nidheesh Balachandran

Dalam desain tabel harga ini, Anda akan menemukan beberapa efek hover cantik yang menambahkan warna pada header tabel yang digelapkan. Mereka masing-masing meninggalkan ruang untuk gambar latar belakang pilihan Anda, dan efek hover dikelola melalui CSS.

Satu hal lain yang saya suka adalah acara klik yang terikat ke seluruh kolom tabel. Dengan cara ini, jika pengunjung mengklik di mana saja pada kolom, itu akan membawa mereka langsung ke halaman pendaftaran yang relevan.

Lihat tabel Harga Pena oleh Nidheesh Balachandran

6. Tabel Harga Bootstrap oleh Sahar Ali Raza

Saya penggemar berat Bootstrap karena ada banyak hal yang dapat Anda lakukan dengan kerangka kerja, dan tema terkaitnya. Salah satu contohnya adalah contoh tabel harga ini.

Banyak dari desain ini dikodekan khusus, termasuk latar belakang header yang miring dan animasi hover. Tetapi tata letak keseluruhan bergantung pada Bootstrap, yang membuatnya sepenuhnya responsif secara default. Tipografinya menakjubkan, dan saya juga menyukai animasi hover saat bergerak di setiap baris. Ini adalah desain tabel bersih yang dapat bekerja untuk hampir semua jenis situs web.

Lihat Tabel Harga Pen Bootstrap oleh Sahar Ali Raza

7. Tabel Harga Desain Material oleh Morten Srensen

Jika Anda menyukai desain material Google maka Anda pasti akan menyukai tabel harga ini. Ini adalah tabel UI material yang mengikuti banyak fitur yang disarankan Google seperti drop shadow hovers dan skema warna datar.

Lihat Pena
Tabel Harga Desain Material (flexbox) oleh Morten Srensen.

8. Tabel Harga Bersih dan Sederhana oleh Daniel Hearn

Super bersih dan ringan paling tepat menggambarkan tabel harga putih ini. Itu tidak bergantung pada banyak warna atau fitur mewah untuk menonjol. Sebaliknya, ia menggunakan abu-abu untuk header dan hitam/putih untuk kontras teks. Ini benar-benar berfungsi dengan baik karena tombol CTA menyimpan efek garis hijau yang kuat.

Saat Anda mengurangi warna dalam tabel, Anda menarik perhatian ke satu-satunya area dengan warna, dan ini biasanya mendorong lebih banyak klik. Karena ini adalah CSS murni, Anda akan dengan mudah memperbarui warna tombol agar sesuai dengan desain Anda.

Lihat Tabel Harga Pena -1 oleh Daniel Hearn

9. Tabel WIP oleh Dylan Mcleod

Untuk pekerjaan yang sedang berlangsung, saya harus mengatakan bahwa set tabel harga yang penuh warna ini terlihat luar biasa. Ini mengikuti banyak teknik tradisional seperti menyorot header tabel dan menjaga satu kolom lebih besar dari yang lain.

Tapi saya paling terkesan dengan berbagai pilihan warna yang menyatu dengan sangat baik. Hampir seperti tabel ini memiliki beberapa header yang berbeda, dan semuanya menarik perhatian Anda karena berbagai alasan.

Lihat Tabel Harga Pena oleh Dylan Mcleod

10. Kisah Harga Flexbox oleh CSSGirl

Sekarang, untuk desain meja yang benar-benar menghadap ke depan, lihat tabel flexbox ini. Saat mengarahkan mouse ke tabel, setiap kolom tumbuh sedikit lebih besar dan meningkatkan warna latar belakang. Ini membantu kolom menonjol dari yang lain dan menarik perhatian lebih cepat. Ini adalah efek bagus yang dibawa ke transisi CSS tabel saat mengubah ukuran browser.

Meskipun fitur terbesar di sini adalah penggunaan flexbox untuk memformat kolom tabel. Contoh ini membuktikan bahwa flexbox adalah masa depan situs web responsif.

Lihat Paket Harga Pena Flexbox oleh Lindsey