Coding HTML CSS Web Desain

Membuat efek zebra (selang seling) pada table dengan CSS

Membuat efek zebra (selang seling) pada table dengan CSS Desember 12, 20152 Comments

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

tutorial web design, belajar desain web, belajar bootstrap, zebra efect pada table

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:

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

2 comments

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *