Membuat Responsive Flat Pricing Table Dengan CSS Dan HTML

Kelasmaster.com – Tabel harga biasanya oleh pelaku usaha untuk menunjukkan perbedaan yang mencolok agar calon pelanggan segera action (bertindak) untuk membeli barang yang ditawarkan. Responsive flat pricing table dengan sentuhan CSS dan HTML akan terkesan apik.

Jasa SEO, jasa pembuatan website, jasa penulis artikel atau lainnya yang ingin mencantumkan harganya di website yang dikelola bisa memakai tabel responsif ini. Terkesan profesional karena tidak ada harga yang tersembunyi. Dilihat di layar smartphone akan tampil responsif menyesuaikan layar pengguna dan tampil sama bagus dengan desktop browser. Sebelumnya silahkan lihat demo di bawah ini secara langsung.

 

  • Basic
  • Rp. 6.000,-
  • 100 Kata
  • Tidak Diskon
  • 1x Revisi
  • 1 Gambar
  • Lolos Copyscape
  • Tidak SEO
  • Pro
  • Rp. 10.000,-
  • 300 Kata
  • Diskon 7%
  • 1x Revisi
  • 1 Gambar
  • Lolos Copyscape
  • SEO
  • Premium
  • Rp. 15.000,-
  • 500 Kata
  • Diskon 10%
  • Revisi Sepuasnya
  • 2 atau 3 Gambar
  • Lolos Copyscape
  • SEO

 

Cukup menarik bukan? Anda cukup menyisipkan file CSS berikut ini. Kalau sudah ada media tambahan kolom untuk CSS bisa tambahkan kode berikut ini atau melalui editor letaknya pada file style.css.

Silahkan atur warna yang disukai agar tampak sesuai dengan keinginan. Selanjutnya buat post dengan teks HTML bukan visual. Berikut kodenya:

Anda bisa menghapus kolom yang tidak perlu atau menambah kolom. Bahkan di sini Anda bisa menambah gambar atau font icon agar tampilan lebih atraktif.

Agar bisa diklik hover yang berjalan perlu disisipkan kode hyperlink yakni sebuah link yang menuju keterangan lebih lanjut. Demikian tutorial cara membuat tabel harga responsif dengan bantuan HTML dan CSS. Semoga berguna.