Tutorial Dreamweaver | Web Desain

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 :

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>

Jika benar maka kamu akan mendapatkan tampilan seperti ini :

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

http://www.ilmugrafis.com/dreamweaver.php?page=membuat-tabel-cantik-berefek-hover

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

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 percetakan di wilayah surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Wa : 08563447868
Email : johan.felisitas[at]gmail[dot]com

Rekomendasi ilmugrafis

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

Supported by ilmugrafis indonesia