HTML 5, Membuat Tabel Belang

Pada tutorial kali ini saya akan berbagi mengenai pembuatan tabel belang-belang abu-abu gelap seperti gambar disamping itu tidaklah sulit. Dengan menggunakan sedikit code css, maka setiap sel dengan warna yang berbeda dan dalam waktu yang relatif singkat.
Oleh karena itu pada tutorial html berikut ini, akan dibuatkan css style untuk mengotomasisasikan proses pemberian warna abu-abu muda dan abu-abu tua seperti pada gambar diatas.
Untuk melakukan hal tersebut, maka teman-teman blogger khususnya teman-teman blogger Indonesia bisa menggunakan nth-of-type selector. Coba perhatikan potongan script dibawah ini:

tr:nth-of-type(even){
    background-color:#f3f3f3;
}
tr:nth-of-type(odd){
    background-color:#ddd;
}

Langkah awal, selector tersebut saya tuliskan paada tag <tr> yang merupakan tag pembuat baris tabel (tabel row). Selanjutnya, ada nilai even yang berarti genap serta odd yang berarti ganjil. Untuk baris-baris dalam urutan genap, maka akan digunakan warna abu-abu terang. Sedangkan baris-baris dalam urutan ganjil akan digunakan warna abu-abu gelap penggunaan warna untuk baris-baris tabel itu menggunakan background-color. 

Berikut script selengkapnya bisa didownload DISINI

Artikel Menarik Lainnya :