Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Tabel Zebra Warna Warni Dengan CSS

Assalamualikum wr wb

 pada kesempatan ini saya akan memabahas sedikit tips mengenai css yaitu cara membuat table zebra dengan css,mungkin tutorial kali ini tidak cukup meweh tapi pasti ada manfaat nya untuk melihat semua data yang ada di tabel dengan tampilan yg lebih elegan.
oke langsung ajh !

 saya disini sudah membuat tabel dengan isi yang sembarang dana tidak menggunakan css sedikt pun :)

di atas kita bisa lihat warna setiap kolom tabel sama saja yaitu putih,hanya sedikit hisan di dalam tabel di atas yaitu menggunakan bordercolor heheh :),dan kita lihat perbedaan seteleah kita memberi sedikit code css walau pun sedikiti ini bisa memperindah tampilan tabel yang kita buat :)

table tr:nth-child(even){
background-color: #eee;
}
setelah kita telah tambahkan kode css tersebut maka tampilannya akan perbeda(warna-warni) tiap baris tabel ,liat gambar dibawah ini :
 

 kode di atas nth-childe(even) = tag untuk mewarnai baris genap, jika kalian ingin mewarnai baris ganjil kalian bisa mengganti even menggunakan odd. kalian juga bisa mengganti warna background dengan sesuka warna kalian

jika kaliang ingin lengkap melihat code HTML dan CSS nya kalian bisa download melalui link dibawah ini:


Sekian dari saya semoga tutorial  cara membuat table zebra dengan css bisa bermanfaat untuk kalian jangan lupa like fanspage agar tidak ketinggalan tutorial mengenai Coding lainnya yg bisa di download gratis hahaha.

wassalamualikum wr wb
Fauzi Pnd
Fauzi Pnd Adalah seorang pemuda yang suka mempelajari hal-hal yang baru sambil nyari duid.

Posting Komentar untuk "Membuat Tabel Zebra Warna Warni Dengan CSS"