[Kode HTML] Cara Membuat Tabel Perbandingan Dengan Ikon Centang dan Silang

Cara Membuat Tabel Perbandingan Dengan Kode HTML

Membuat Tabel Perbandingan HTML dan CSS Dengan Ikon Centang dan Silang, Responsif, tidak bikin lemot

Langkah 1 Tambahkan HTML

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

Untuk ikon:

• fa fa-check untuk centang
• fa fa-remove untuk silang

---

Langkah 2 Tambahkan CSS

Untuk cara penempatan CSS untuk blogger silahkan lihat disini

<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Hasilnya seperti ini:

Untuk warna Centang dan Silang, bisa kamu ganti menjadi seperti ini:

<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: skyblue; <!-- Ganti Warna Centang -->
}

.fa-remove {
  color: pink; <!-- Ganti Warna Silang -->
}
</style>

Dan Hasilnya Seperti Ini:

---

Share this post