Publish: 22 Juli 2014 | Author & Copyright: Johan | Status: FREE tutorial CSS
Tabel tidak bisa dipisahkan dalam pembuatan website yang cantik dan menarik. Pada tutorial CSS Kali ini saya akan memberikan cara membuat tabel atau tabledengan tambahan fitur hover. Efek hover maksudnya adalah ketika table kita sorot (highlight) dengan pointer (mouse) maka table tersebut akan menyala atau berganti warna sehingga memudahkan pengguna (user) untuk membaca data dalam table secara jelas dan baik.
Berikut ini cara pembuatan Tabel Cantik :
1. Kita buat dulu struktur html pengkodean untuk tablenya, Letakkan diantara tag <body> ... </body>
Contoh :
| <body> <table id="table-a"> <thead> <tr><th>Judul 1</th><th>Judul 2</th> <th>Judul 3</th></tr> </thead> <tbody> <tr><td>Data 1A</td><td>Data 1B</td><td>Data 1C</td></tr> <tr><td>Data 2A</td><td>Data 2B</td><td>Data 2C</td></tr> <tr><td>Data 3A</td><td>Data 3B</td><td>Data 3C</td></tr> <tr><td>Data 4A</td><td>Data 4B</td><td>Data 4C</td></tr> <tr><td>Data 5A</td><td>Data 5B</td><td>Data 5C</td></tr> </tbody> </table> </body> |
Hasilnya :
Gambar Contoh tabel
Gambar Contoh tabel
Simpan dalam file html. (misal : tabelcantik.html)
2. Untuk efeknya kita buat dengan coding CSS sehingga tabel nantinya akan berbentuk warna dasar (sebelum disorot mouse) dan warna hover (saat disorot mouse)
Buat lembar kerja baru di Dreamweaver ( File > New > Basic Page > CSS )
Berikut ini kode CSSnya :
| #table-a { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; width: 500px; text-align: center; border-collapse: collapse; } #table-a th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; } #table-a td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; } #table-a tr:hover td { background: #d0dafd; color: #339; } |
Simpan dalam bentuk "tabel.css"
3. Tambahkan script ini dalam susunan html kita, script ini berfungsi untuk memanggil file CSS tabel yang kita buat tadi.
Letakkan diantara tag <head>...</head>
| <link rel="stylesheet" type="text/css" href="tabel.css"> |
Jika benar maka kamu akan mendapatkan tampilan seperti ini :
Gambar Tabel 2 warna
Gambar Tabel 2 warna
Simpan dengan menekan Ctrl + S. dan cobalah uji coba dengan membukatabelcantik.html di browser.
Hasilnya :
Gambar Tabel cantik 2 warna berefek hover
Gambar Tabel cantik 2 warna berefek hover
0 comments:
Post a Comment