Pada tutorial CSS Kali ini saya
akan memberikan cara membuat Highligt tabel 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. Dimana metode CSS yang digunakan
menggunakan Embeded CSS
Langkahnya adalah sebagai berikut:
1.
Buat Tabel di Dreamweaver Misal 5 kolom 8 baris
dan isi datanya, seperti tampak pada gambar dibawah ini
 |
DESAIN TABEL DI DREAMWEAVER |
Coding HTML
<body>
<table
width="687" border="1"
style="border-collapse: collapse;">
<thead>
<tr>
<th width="30"
bgcolor="#66FF99">No</th>
<th width="143"
bgcolor="#66FF99">Nama</th>
<th width="186"
bgcolor="#66FF99">Alamat</th>
<th width="189"
bgcolor="#66FF99">Kota</th>
<th width="105"
bgcolor="#66FF99">Kode Pos</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Adi
Sabjaya</td>
<td>Jl. Dipati Ukur No
122</td>
<td>Bandung</td>
<td>40123</td>
</tr>
<tr>
<td>2</td>
<td>Usup</td>
<td>Jl. Chanjuang No
23</td>
<td>Cimahi</td>
<td>43123</td>
</tr>
<tr>
<td>3</td>
<td>Nita
Tilana</td>
<td>Jl. Arta
Graha</td>
<td>Bandung</td>
<td>43444</td>
</tr>
<tr>
<td>4</td>
<td>Armand
Maulana</td>
<td>Jl. Patika No
122</td>
<td>Cimahi</td>
<td>56655</td>
</tr>
<tr>
<td>5</td>
<td>Dede
Jatmiko</td>
<td>Jl. Dursasana No
123</td>
<td>Bandung</td>
<td>21233</td>
</tr>
<tr>
<td>6</td>
<td>Ugi
Seliaswati</td>
<td>Jl. Cibaligo No
32</td>
<td>Bandung</td>
<td>65433</td>
</tr>
<tr>
<td>7</td>
<td>Seta</td>
<td>Jl. Ciawi Tali atas No
22</td>
<td>Cimahi</td>
<td>78977</td>
</tr>
</tbody>
</table>
</body>
2.
Selanjutnya Tambahkan kode Embeded CSS untuk
Membuat Heading dibawah tag <head> , lihat coding nya dibawah ini.
<style>
tbody tr:hover{ background-color:#0CC;}
</style>
3.
Kemudian save file dan Preview di Browser serta arahkan Mouse ke data table, hasilnya tampak
seperti pada gambar dibawah ini
 |
| HASIL HIGHTLIGHT MENGGUNAKAN EMBEDED KODE CSS |
Selamat Mencoba
PADEPOKAN IT COURSE
IT Tutorial, Training Center & IT Solution
IT Tutorial, Training Center & IT Solution
No comments:
Post a Comment