Tips Membuat Warna Row dengan Menggunakan CSS3 Nth-Child Selector

19/06/2014    Rully Febrian    1269     Website

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 :

Fungsi-CSS3-Nth-Child-Selector-Pada-Table

 

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 :

 

Fungsi-CSS3-Nth-Child-Selector-Pada-Table

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

Fungsi-CSS3-Nth-Child-Selector-Pada-Table

 

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More