Blog Request tutorial? klik disini!

  • Tips Membuat Warna Row Dengan Menggunakan CSS3 Nth-Child Selector

    Ditulis oleh: Rully Febrian
    911 kali dibaca
    19 Jun / 2014 16:06

    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.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155