header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmugrafis » WEB DESAIN - DREAMWEAVER » Session 1  |  » Session 2

Membuat Tabel Cantik Berefek Hover

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 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 :

<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 :
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 :
tabel 2 warna
Gambar Tabel 2 warna

Simpan dengan menekan Ctrl + S. dan cobalah uji coba dengan membuka tabelcantik.html di browser.

Hasilnya :
tabel cantik 2 warna hover
Gambar Tabel cantik 2 warna berefek hover

live demo
Live Demo dan Download Source [ Klik Disini ]

Demikian membuat tabel cantik hover dengan CSS di dreamweaver. Terima kasih, semoga bermanfaat.

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 
author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com


Rekomendasi ilmugrafis

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop...



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

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

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker