NAVIGASI MENU :
TUTORIAL > DREAMWEAVER
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>
<link rel="stylesheet" type="text/css" href="tabel.css">
|
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 :
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
* 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
Jasa Desain Grafis Terpercaya
Dapatkan jasa desain grafis berkualitas dari team ilmugrafis
Supported by ilmugrafis indonesia |
