07. membuat table fixed header dan efek hover
Upcoming SlideShare
Loading in...5
×
 

07. membuat table fixed header dan efek hover

on

  • 555 views

 

Statistics

Views

Total Views
555
Views on SlideShare
551
Embed Views
4

Actions

Likes
0
Downloads
4
Comments
0

3 Embeds 4

http://pilkoma-2012.com 2
http://lee.pilkoma-2012.com 1
http://www.lee.pilkoma-2012.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

07. membuat table fixed header dan efek hover 07. membuat table fixed header dan efek hover Document 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 --