CSS HTML

Mempercantik Tampilan Table dengan CSS

Written by Fatoni

Mempercantik Tampilan Table dengan CSS. Sudah lama benget za saya gag update tutorial di web ini, dan kali ini saya sempatkan untuk menuliskan artikel sederhana tentang bagaimana melakukan styling pada Table dengan CSS. Pada tutorial ini akan dibuat sebuah Table dengan HTML yang berisikan data siswa, dan akan dipercantik tampilannya dengan menambahkan sedikit kode CSS.

Langsung saja dimulai, pertama tentu saja membuat Table dahulu dengan HTML, yang berisi beberapa data. Dan kode HTML bisa Anda Copy di bawah ini:

Jangan lupa simpan dengan nama index.html

Nah, dari Kode HTML di atas bisa didapatkan tampilan seperti gambar di bawah ini

Mempercantik Tampilan Table dengan CSS

Dan sekarang akan ditambahkan Kode CSS untuk mempercantik tampilan Tabel di atas, da berikut ini Kode CSS nya:

Pastikan Anda menyimpannya dengan nama style.css

Dengan ditambahkan Kode CSS di atas, maka tampilan tabel yang semula seperti di atas akan berubah seperti gambar di bawah ini:

table-dengan-css

Lihat pada nomor 4, background berubah ketika mouse ada di atasnya.

Selamat mencoba… 🙂

About the author

Fatoni

Programming is my hobby, not my job.

10 Comments

Leave a Comment