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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE> <html> <head> <title>Styling Table</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table width="648" cellpadding="5"> <tr class="head"> <th width="44">No.</th><th width="282">Nama Siswa</th><th width="152">Jurusan</th><th width="118">Kelas</th> </tr> <tr class="satu"> <td align="center">1</td><td>Ah. Fatoni Arif</td><td>TKJ</td><td align="center">XI</td> </tr> <tr class="dua"> <td align="center">2</td> <td>Tedy Sultoni</td><td>TKJ</td><td align="center">XI</td> </tr> <tr class="satu"> <td align="center">3</td> <td>Mustain</td><td>TKJ</td><td align="center">XI</td> </tr> <tr class="dua"> <td align="center">4</td> <td>Joko Susilo</td><td>TKJ</td><td align="center">XI</td> </tr> <tr class="satu"> <td align="center">5</td> <td>Masbuhin</td><td>TKJ</td><td align="center">XI</td> </tr> <tr class="dua"> <td align="center">6</td> <td>Anton Zunaidi</td> <td>Akuntansi</td><td align="center">XI</td> </tr> <tr class="satu"> <td align="center">7</td> <td>Agus Santoso</td><td>Akuntansi</td><td align="center">XI</td> </tr> <tr class="dua"> <td align="center">8</td> <td>Widodo Saputra</td> <td>Akuntansi</td> <td align="center">XII</td> </tr> <tr class="satu"> <td align="center">9</td> <td>Dedy Setiawan</td> <td>Akuntansi</td> <td align="center">XII</td> </tr> <tr class="dua"> <td align="center">10</td> <td>Sukardi</td> <td>Akuntansi</td> <td align="center">XII</td> </tr> </table> </body> </html> |
Jangan lupa simpan dengan nama index.html
Nah, dari Kode HTML di atas bisa didapatkan tampilan seperti gambar di bawah ini
Dan sekarang akan ditambahkan Kode CSS untuk mempercantik tampilan Tabel di atas, da berikut ini Kode CSS nya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
@charset "utf-8"; /* CSS Document */ table, th, td { border-collapse:collapse; border:1px solid #999; font-family:Tahoma, Geneva, sans-serif; font-size:12px; } .head { background: rgb(206,220,231); /* Old browsers */ background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */ } .head th { padding:10px; color:#333; text-shadow:1px 1px 0px #CCC; font-size:14px; } .satu { background-color:#CECECE; } .dua { background-color:#E0E0E0; } .satu:hover, .dua:hover { background-color:#BADFFE; font-weight:bold; cursor:pointer; } |
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:
Lihat pada nomor 4, background berubah ketika mouse ada di atasnya.
Selamat mencoba… 🙂
dede
nice, trims
menarik banget gan…. Kunbalx ya http://solagracia.nazuka.net
makasih gan (y) 😉
wah pak guru hebat….
Kunbal y pak,
kasih saya kritik & Saran buat blog saya 😀
Gan , kok gk ada penjelasanya ya? , klok cuma gini mah sama aja kayak COPAS , lha ilmunya mana gan ? , klok buat presentasi gk cocok nih gan 🙁
mohon maaf gan. memang di sini belum saya kasih penjelasan.
sekarang sudah bisa pakek bootstrap untuk lebih simple dan bagusnya.
permisi om pino mau tanyak..itu kan cuman buat 10 nomer dan nama tampilannya ya.kalo mau otomatis..saya ada tabel 100 atau 1000 gmna om..??
mohon penjelasanya..terimakasih
kalo mau ambil dari database om..menampilkan indexnya gmna om
silahkan cari aja tutorial menampilkan data dari database mysql. outputnya sesuaikan dg css di sini.
atau kalau mau gampang pakek datatables, silahkan cari di web ini