Cara Membuat Tabel Bergaris Zebra

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

by Hanifah Nurbaeti February 8, 2021

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>