Humayraa.com (2015/12/12) – Efek zebra pada tabel sangatlah dibutuhkan terutama untuk tabel yang berukuran besar. Efek zebra ini sangat bermanfaat untuk menghindari kesalahan dalam pembacaan (baris loncat).
Untuk membuat efek zebra, logikanya cukup sederhana yaitu memberi warna yang berbeda antara baris (<tr>) genap dan ganjil.

Lalu bagaimana cara mengidentifikasi mana baris ganjil dan mana baris genap? Jawabannya dengan mengunakan selector nth-child(odd) untuk baris ganjil dan nth-child(even)untuk baris genap. Sekarang kita lihat table dibawah ini:

<table>
<tbody>
<tr>
<th>Baris 1</th>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<th>Baris 2</th>
<td>isi</td>
<td>isi</td>
<td>isi</td>
</tr>
<tr>
<th>Baris 3</th>
<td>isi</td>
<td>isi</td>
<td>isi</td>
</tr>
<tr>
<th>Baris 4</th>
<td>isi</td>
<td>isi</td>
<td>isi</td>
</tr>
<tr>
<th>Baris 5</th>
<td>isi</td>
<td>isi</td>
<td>isi</td>
</tr>
</tbody>
</table>

kemudian kita buat CSS sebagai berikut:

body{
  font-family:arial,verdana;
  font-size:12px;
}
th,td{
  padding:5px 10px;
  text-align:center;
}
/* Warna Header */
th{
  background:#333;
  color:#fff;
}

/* Efek Zebra */
table tr:nth-child(odd){
  background:#aaa; /* Baris ganjil Dihitung dari Header*/
}
table tr:nth-child(even){
  background:#eee; /* Baris Genap */
}

Hasilnya:

See the Pen Table with Zebra Efect by HUMAYRAA (@humayraadotcom) on CodePen.

Incoming search terms:

(Visited 1.515 times, 6 visits today)