How To

Cara Membuat Tabel Perbandingan

Di bawah ini kita akan mempelajari cara membuat tabel perbandingan dengan CSS. Tabel perbandingan di bawah ini biasanya ada pada sebuah website yang menawarkan fitur-fitur tambahan jika kita mau berlangganan pada website tersebut.

Tabel Perbandingan

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: center;
  padding: 16px;
}

th:first-child, td:first-child {
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}
</style>
</head>
<body>

<h2>Comparison Table</h2>

<table>
  <tr>
    <th style="width:50%">Fitur</th>
    <th>Basic</th>
    <th>Pro</th>
  </tr>
  <tr>
    <td>Contoh 1</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Contoh 2</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Contoh 3</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Contoh 4</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Contoh 5</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
</table>

</body>
</html>

Cara Membuat Tabel Perbandingan

Langkah 1) Tambahkan HTML:
Contoh

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table>
  <tr>
    <th style="width:50%">Fitur</th>
    <th>Basic</th>
    <th>Pro</th>
  </tr>
  <tr>
    <td>Contoh 1</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>Contoh 2</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
</table>

Langkah 2) Tambahkan CSS:
Contoh

/* Style untuk table */table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

/* Style utnuk header dan datanya */th, td {
  text-align: center;
  padding: 16px;
}

th:first-child, td:first-child {
  text-align: left;
}

/* Menggunakan tabel zebra-stripped table */tr:nth-child(even) {
  background-color: #f2f2f2
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

Hanifah Nurbaeti

Share
Tags: How Totabel