Membuat Table Zebra dengan CSS

Table zebra (belang-belang) cukup bermanfaat jika kita ingin menampilkan data. Bisa membantu user untuk lebih mudah membacanya. Untuk membuatnya cukup mudah dengan bantuan CSS.

Pertama, buat class pada CSS , misal: zebra. Sebagai contoh secript berikut:

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

Kemudian tempelkan class tersebut pada table yang digunakan untuk menampilkan data, contoh :

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

Agar ketika disorot dengan mouse (hover) bisa berubah warna, tambahkan baris berikut.

<style>
.zebra tr:hover {
     background-color: yellow;
}
</style>

Berikut contoh hasilnya :

Zebra Table

Zebra Table

 

Demikian, Semoga bermanfaat.

 

4 Responses to Membuat Table Zebra dengan CSS

  1. Andi mengatakan:

    wah, gampang banget ternyata. dulunya ane pake php if baris ganjil ane kasih background.. makasih om, ilmu baru buat ane 😆

  2. abuibrahim11 mengatakan:

    sama om, dulu jg pake php, tp nemu ini jd tambah enteng…:mrgreen: makasih atas kunjungannya..😉

  3. Vera Linn mengatakan:

    Maksud dari .zebra tr:nth-child(even) { ini pa ya? boleh minta bantuannya.. soalnya besok saya mau UKK..

    • abuibrahim11 mengatakan:

      Kurang lebih seperti ini, jika ada table yang mempunya class zebra maka pada tr (baris) yang even (genap) diberi perintah css dengan perintah

      background-color: #E6E6FA;,

      sedangkan yang odd (ganjil) diberi warna lain, sehingga warnanya selang-seling seperti zebra. Kira-kira seperti itu. Semoga membantu..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: