Membuat Table Fixed Header dan Efek Hover

Setelah sebelumnya kita mempelajari tentang dasar-dasar table pada html, border...
<th>
<div class="fixHead">Guru</div>
</th>
<th>
<div class="fixHead">Ruang</div>
</th>
<th>
<div class="fixHead">Waktu</di...
<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...
<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="...
<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>...
</div>
</div>
</body>
</html>

Dan berikut adalah styling pada CSS, syntax css dapat disisipkan didalam elemen head
pada h...
#jadwalPel td{
padding: 5px;
text-align: left;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}
#jadwalPel tr...
Upcoming SlideShare
Loading in …5
×

07. membuat table fixed header dan efek hover

885 views
777 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
885
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

07. membuat table fixed header dan efek hover

  1. 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>
  2. 2. <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>
  3. 3. <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>
  4. 4. <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>
  5. 5. <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>
  6. 6. </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; }
  7. 7. #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 --

×