![]() |
Home | Tutorials | Fonts | Gallery | Contact | ilmugrafis Store |
Membuat Tabel Cantik Berefek HoverPublish: 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 table dengan 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 :
Hasilnya : 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 :
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>
Jika benar maka kamu akan mendapatkan tampilan seperti ini : Simpan dengan menekan Ctrl + S. dan cobalah uji coba dengan membuka tabelcantik.html di browser. Hasilnya :
Demikian membuat tabel cantik hover dengan CSS di dreamweaver. Terima kasih, semoga bermanfaat.
![]() Info dan Kontak Penulis Johan Felisitas Rekomendasi ilmugrafis
Supported by ilmugrafis indonesia |
![]() CORELDRAW CorelDRAW Dasar CorelDRAW Logo CorelDRAW Bebas CorelDRAW Tools PHOTOSHOP Photoshop Dasar Photoshop Teks Effect Photoshop Photo Efek Photoshop Alternatif Photoshop Plugins FREEWARE Gimp Inkscape FOTOGRAFI Lightroom VECTOR Adobe Illustrator ANIMASI Flash Swishmax 3D MODELING 3dsMAX AutoCAD Cinema 4D Blender VIDEO EDITING Adobe Premiere After Effect Pinnacle WEB DESIGN Dreamweaver jQuery PUBLISHING InDesign Ms. Paint ARTS News Artikel Gallery Jasa Desain FRIENDS CiptaDsgn Photoshop Desain Link to us ![]() ![]() Aplikasi Android ilmugrafis ![]() Privacy policy |
Peta Situs | Term of Use | web edukasi - ilmugrafis.com Indonesia |
Copyright © 2020 ilmuGrafis. All Rights Reserved. | RSS | Subscribe Hak Cipta Dilindungi Undang - Undang & Dmca |