Cara Membuat Tabel Harga Responsif Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 20, 2021

Di bawah ini kita akan mempelajari cara membuat tabel harga yang responsif dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}

.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

.price .grey {
  background-color: #eee;
  font-size: 20px;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#FF0000">Easy</li>
    <li class="grey">Rp 25000</li>
    <li>Gratis Download</li>
    <li>Dapat Berita Menarik</li>
    <li>10 GB Penyimpanan</li>
    <li>kecepatan 145 khz</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#0000FF	">Medium</li>
    <li class="grey">Rp 50000</li>
    <li>Gratis Download</li>
    <li>Dapat Berita Menarik</li>
    <li>20 GB Penyimpanan</li>
    <li>kecepatan 160 khz</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Immediately</li>
    <li class="grey">Rp 75000</li>
    <li>Gratis Download</li>
    <li>Dapat Berita Menarik</li>
    <li>50 GB Penyimpanan</li>
    <li>kecepatan 200 khz</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

</body>
</html>

Cara Membuat Tabel Harga Responsif

Langkah 1) Tambahkan HTML:
Contoh

<div class="columns">
  <ul class="price">
    <li class="header">Easy</li>
    <li class="grey">Rp 25000</li>
    <li>Gratis Download</li>
    <li>Dapat Berita Menarik</li>
    <li>10 GB Penyimpanan</li>
    <li>kecepatan 145 khz</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div

Langkah 2) Tambahkan CSS:
Contoh

* {
  box-sizing: border-box;
}

/* Buat tiga kolom dengan lebar yang sama */
.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}

/* Style untuk list */
.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Tambahkan shadow saat hover */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Header harga */
.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

/* List items */
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

/* warna abu untuk list item */
.price .grey {
  background-color: #eee;
  font-size: 20px;
}

/* button sign up */
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

/* Ubah lebar tiga kolom menjadi 100%
(untuk menumpuk secara horizontal di layar kecil) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}