07. membuat table fixed header dan efek hover

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>

<th>
<div class="fixHead">Guru</div>
</th>
<th>
<div class="fixHead">Ruang</div>
</th>
<th>
<div class="fixHead">Waktu</div>
</th>
</tr>
</thead>
<span class="garis"></span>

<tbody>
<tr>
<td>1</td>
<td rowspan="3">Senin</td>
<td>Matematika</td>
<td>X</td>
<td>IPA</td>
<td>Rinawati</td>
<td>X-IPA</td>
<td>07.00-08.30</td>
</tr>
<tr>
<td>2</td>
<td>Penjaskes</td>
<td>XI</td>
<td>Bahasa</td>
<td>Binbin</td>
<td>Lapangan Basket</td>
<td>07.00-08.30</td>
</tr>
<tr>
<td>3</td>
<td>Seni Budaya</td>
<td>XII</td>
<td>IPS</td>
<td>Lia Damayanti</td>
<td>XII-IPS</td>
<td>10.15-11.45</td>
</tr>
<tr>
<td>4</td>
<td rowspan="3">Selasa</td>
<td>Bahasa Inggris</td>

<td>X</td>
<td>IPS</td>
<td>Herry Poter</td>
<td>X-IPS</td>
<td>07.00-09.30</td>
</tr>
<tr>
<td>5</td>
<td>Fisika</td>
<td>XI</td>
<td>IPA</td>
<td>Lilis</td>
<td>XI-IPA</td>
<td>10.15-11.45</td>
</tr>
<tr>
<td>6</td>
<td>Sejarah</td>
<td>XII</td>
<td>IPS</td>
<td>Titin</td>
<td>XII-IPS</td>
<td>10.15-11.45</td>
</tr>
<tr>
<td>7</td>
<td rowspan="3">Rabu</td>
<td>Biologi</td>
<td>XI</td>
<td>IPA</td>
<td>Agus Budiman</td>
<td>Lab Biologi</td>
<td>07.00-09.30</td>
</tr>
<tr>
<td>8</td>
<td>Bahasa Jepang</td>
<td>XII</td>
<td>Bahasa</td>
<td>Ida Nurcahyani</td>
<td>XII-Bahasa</td>
<td>08.30-10.00</td>
</tr>
<tr>
<td>9</td>
<td>Kimia</td>

<td>XII</td>
<td>IPA</td>
<td>Wahyu Gusman</td>
<td>XII-IPA</td>
<td>10.15-11.45</td>
</tr>
<tr>
<td>10</td>
<td rowspan="3">Kamis</td>
<td>Bahasa Sunda</td>
<td>X</td>
<td>IPS</td>
<td>Tika Kurniasih</td>
<td>X-IPS</td>
<td>07.00-08.30</td>
</tr>
<tr>
<td>11</td>
<td>Matematika</td>
<td>XII</td>
<td>IPA</td>
<td>Ratih Asmara</td>
<td>XII-IPA</td>
<td>07.00-09.45</td>
</tr>
<tr>
<td>12</td>
<td>Ekonomi</td>
<td>XI</td>
<td>IPS</td>
<td>Wulansih</td>
<td>XI-IPS</td>
<td>10.15-11.45</td>
</tr>
<tr>
<td>13</td>
<td rowspan="3">Jumat</td>
<td>Bahasa Sunda</td>
<td>XII</td>
<td>Bahasa</td>
<td>Tika Kurniasih</td>
<td>XII-Bahasa</td>
<td>07.00-08.30</td>
</tr>
<tr>
<td>14</td>

<td>Sosiologi</td>
<td>XII</td>
<td>IPS</td>
<td>Syadili</td>
<td>XII-IPS</td>
<td>07.00-08.30</td>
</tr>
<tr>
<td>15</td>
<td>Bahasa Inggris</td>
<td>XI</td>
<td>IPA</td>
<td>Herry Poter</td>
<td>XI-IPA</td>
<td>10.15-11.45</td>
</tr>
<tr>
<td>16</td>
<td rowspan="3">Sabtu</td>
<td>Penjaskes</td>
<td>X</td>
<td>Bahasa</td>
<td>Agus</td>
<td>Lapangan Basket</td>
<td>07.00-08.30</td>
</tr>
<tr>
<td>17</td>
<td>Seni Budaya</td>
<td>XII</td>
<td>IPS</td>
<td>Panca</td>
<td>XII-IPS</td>
<td>08.30-10.00</td>
</tr>
<tr>
<td>18</td>
<td>Bimbingan Konseling</td>
<td>X</td>
<td>IPS</td>
<td>Mariyam</td>
<td>X-IPS</td>
<td>10.15-11.45</td>
</tr>
</tbody>
</table>

</div>
</div>
</body>
</html>

Dan berikut adalah styling pada CSS, syntax css dapat disisipkan didalam elemen head
pada html, atau dapat di simpan diluar file html namun harus me-linkan nya di bagian head html.
.wrapper {
width: 900px;
height: 200px;
margin: 10px auto;
background-color: white;
border: 5px solid #eee;
box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
position: relative;
padding-top: 40px;
}
.tableContainer {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
#jadwalPel{
background-color: white;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #ccc;
box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
border-collapse: collapse; /*PENTING!! SUPAYA BORDERNYA NYATU*/
}
#jadwalPel .fixHead {
font-size: 14px;
font-weight: bold;
position: absolute;
top: 0;
line-height: 40px;
text-align: left;
border-left: 1px solid #ddd;
padding-left: 5px;
}

#jadwalPel td{
padding: 5px;
text-align: left;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}
#jadwalPel tr:hover {
background: #eee;
}
.garis {
border-bottom: 1px solid #6678b1;
width:895px;
height: 1px;
background: #6678b1;
position:absolute;
top:40px;
box-shadow: 0px 1px 6px rgba(0,0,0,0.6);
}
Hasil Akhir

-- Sekian --

07. membuat table fixed header dan efek hover

More Related Content

Viewers also liked (16)

Similar to 07. membuat table fixed header dan efek hover (20)

More from Muhammad Arif Billah Faishaluddin (11)

07. membuat table fixed header dan efek hover