Membuat zebra tabel dengan css

Membuat zebra tabel dengan css

732
0
SHARE

Jumpa lagi kawan. Kali ini saya akan membahas tentang bagaimana cara membuat zebra tabel menggunakan css. apa itu zebra tabel ?

Pasti anda pernah mengetahui tabel dengan warna pada baris ganjil dan baris genapnya berbeda-beda kan. Itulah yang biasa disebut dengan zebra tabel. (mungkin karena seperti zebra yang belang-belang hehe). Dengan zebra tabel data yang disajikan akan lebih mudah dibaca, terlebih jika data yang disajikan memiliki banyak kolom.

Baiklah langsung saja kita coba membuatnya ya.

Kita asumsikan di sini kita telah memiliki database dan tabel lengkap dengan isinya. Kita akan menampilkannya dengan menggunakan PHP.

Buatlah file index.php dengan kode sebagai berikut :

Yang menjadi point utama dari kode di atas yaitu baris 41 s/d 47, dimana kita menentukan aturan yang berbeda untuk tabel yang ganjil dan yang genap. Kita menggunakan class yang berbeda untuk masing-masing baris tersebut.

Aturan warna ditentukan pada 13 s/d 23 sesuai dengan nama classnya.

Pada baris 21 s/d 23 ada aturan guna mengatur warna saat kursor hover di atas baris. Anda dapat mengatur warnanya sesuai dengan yang anda mau.

Berikut ini adalah screenshot zebra tabel yang telah saya buat dengan kode di atas. Warna pada baris 5 adalah warna saat kursor berada di atasnya.

zebra tabel

Mudah bukan, selamat mencoba, semoga bermanfaat.

Bagikan artikel ini ya.. terima kasih

NO COMMENTS

LEAVE A REPLY