1. Membuat Table Fixed Header dan Efek Hover
Setelah sebelumnya kita mempelajari tentang dasar-dasar table pada html, border table,
weight dan height table, colspan dan rowspan, serta mewarnai table. Kali ini kita akan membuat
sebuah table yang menggabungkan pengaturan elemen-elemen diatas. Sebelumya kita telah
mempelajari dasar-dasar pada CSS. CSS akan kita aplikasikan dan kita eksplor pada praktikum
kali ini.
Pada praktikum kali ini kita akan membuat sebuah table jadwal pelajaran yang memiliki
fixed header, jadi ketika isi table di gulung(scroll) maka head table tidak ikut bergerak, sehingga
informasi judul kolom pada head akan selalu ada walaupun isi table digulung terus sampai ke
akhir tabel. Teknik ini bertujuan untuk menghemat area website namun informasi masih dapat
tersampaikan secara utuh. Dan juga akan ditambahkan efek hover yang apabila kursor berada
pada baris tertentu, maka background table pada baris tersebut akan berubah warna.
Berikut markup yang kita buat pada html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Fixed Header</title>
</head>
<body>
<div class="wrapper">
<div class="tableContainer">
<table id="jadwalPel" summary="Table Jadwal Pelajaran">
<thead>
<tr>
<th>
<div class="fixHead">No</div>
</th>
<th>
<div class="fixHead">Hari</div>
</th>
<th>
<div class="fixHead">Matpel</div>
</th>
<th width="60px">
<div class="fixHead">Kelas</div>
</th>
<th>
<div class="fixHead">Jurusan</div>
</th>