How To

Cara Membuat Tabel Bergaris Zebra

Di bawah ini kita akan mempelajari cara membuat tabel bergaris zebra dengan CSS.

Tabel Bergaris Zebra

Untuk membuat tabel bergaris zebra(hitam-putih), gunakan selektor nth-child () dan tambahkan warna background ke semua baris tabel genap (atau ganjil):

Contoh

<!DOCTYPE html>
<html>
<head>
<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: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2>Zebra Striped Table</h2>
<p>Untuk tabel bergaris zebra, gunakan selektor nth-child () dan tambahkan warna latar belakang ke semua baris tabel genap (atau ganjil):</p>

<table>
  <tr>
    <th>Nama</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Asep</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Erik</td>
    <td>9</td>
  </tr>
  <tr>
    <td>Selvi</td>
    <td>6</td>
  </tr>
</table>

</body>
</html>

Hanifah Nurbaeti

Share
Tags: How Totabel