Tips Membuat Warna Row dengan Menggunakan CSS3 Nth-Child Selector

Pada hari ini saya akan memberikan tips dan trick bagaimana memberikan efek warna row berlainan pada sebuah table dengan menggunakan fungsi selector CSS3 yaitu nth-child. Biasanya kita menggunkan jquery untuk membuat warna otomatis pada sebuah table. Dengan nth-child teman-teman bisa membuat hal yang sama dengan mudah. Kita hanya memberikan properti background pada row yang akan diberikan warna. Coba teman-teman perhatikan gambar table di bawah ini :

Table diatas memiliki warna yang berbeda bukan.. jika kita menambahkan row pada table diatas maka warna background akan otomatis mengikuti. Penasaran ya.. mari kita mulai. Teman-teman bisa langsung menulis kode HTML-nya seperti dibawah ini :

Simpan kode HTML diatas dengan nama index.html. Nah.. sekarang kita tambahkan stylenya di antara tag head seperti berikut :

Simpan. dan jalankan di browser. Terlihat pada style diatas fungsi dari tr:nth-child(2n) adalah memberikan background row posisi 2 dan kelipatannya. Sedangkan tr:nth-child(2n+1) adalah memberikan background row setelah row kedua yaitu:3,5 dan seterusnya.

Sudah mengerti ya teman-teman. Kode diatas bisa di download DISINI. Demikian tutorial ini saya berikan semoga bermanfaat. Terima Kasih Selamat Mencoba.