Membuat Table Zebra Dengan CSS

Dalam membuat sebuah tabel kita biasanya menginginkan baris di table seperti zebra yaitu warna background baris genap dan ganjil berbeda. Hal ini dilakukan supaya memudahkan orang dalam membaca tiap baris dari table tersebut.

Berikut saya akan jelaskan membuat table zebra dengan menggunakan style CSS,

Pertama-tama buatlah class di css, misalnya disini kita buat class zebra seperti berikut :

<style>
.zebra tr:nth-child(even) {
     background-color: #f9f9f9;
}
.zebra tr:nth-child(odd) {
     background-color: #DCDCDC;
}
</style>

Kemudian style tersebut tempelkan pada table seperti berikut,

<table class="zebra">
     <tr><td></td></tr>
     <tr><td></td></tr>
</table> 

Supaya ketika kita arahkan mouse (hover) ke setiap baris bisa berubah warna, tambahkan baris berikut ke tag <style>

.zebra tr:hover {
     background-color: #4679BD;
}

Untuk contoh bisa dilihat pada link berikut Sample Table Zebra