07. membuat table fixed header dan efek hover
TRANSCRIPT
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*8)+(tr>td*7)*2)*6--> <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 --