Joshaxis: Membuat Tabel Plus Scroll Bar

MEMBUAT TABEL PLUS SCROLL BAR

Membuat 'Tabel Plus Scroll Bar' ini adalah suatu kreasi kode html tabel / table include scroll bar.

Ditulis pada Notepad dan menyimpannya sebagai file *.html

Sebenarnya untuk scroll bar bisa dengan hanya menuliskan kode berikut :

<div style="background:#707DC3; overflow: auto; height:400px;">
tabelnya
</div>

Kode tersebut akan membuat seluruh tabel termasuk headernya berada dalam scroll bar.

Dalam kreasi kali ini, kita akan membuat header untuk tabel tersebut berada diatas scroll bar.

Ada tiga tabel yang kita gunakan yaitu :

1. Tabel untuk package / pembungkusnya

2. Tabel untuk header

3. Tabel yang kita beri scroll bar

Untuk melihat tabel plus scroll bar ini yang sudah jadi, silahkan

Sebelum membuatnya, pastikan kita sudah pernah mengetahui cara membuat sebuah tabel standart.

Cara membuat tabel plus scroll bar ini adalah sebagai berikut :

1. Buat sebuah CSS (Cascading Style Sheets) untuk mengurangi beban pengulangan penulisan beberapa kode yang sama.

Kodenya :

<html>

<head>

<title>Tabel Plus Scroll Bar</title>

<style type="text/css">

div.scroll

{

height:400px;

overflow: auto;

background:#707DC3;

}

td.jcc, td.jcu, td.of, td.on, td.jcw

{

background:#0000FF;

text-align:center;

font-family:Times New Roman;

font-weight:bold;

line-height:30px;

}

td.of, td.on

{

padding:2px 4px 2px 4px;

border-top: 10px solid #FF0000;

border-left: 10px solid green;

border-bottom: 10px solid magenta;

}

tr.jsw, tr.jcr, tr.jsc, tr.jsu, tr.jcb, tr.jss

{

background:#0000FF;

text-align:center;

font-family:Times New Roman;

font-weight:bold;

line-height:30px;

}

.jh

{

border-top: 0px solid #0000FF;

border-right: 0px solid yellow;

border-left: 0px solid green;

border-bottom: 0px solid magenta;

cellspacing: 0px;

cellpadding: 0px;

background: #707DC3;

}

js1, js2, js3, js4, js5, js6,

jc1, jc2, jc3, jc4, jc5, jc6

{

text-align:center;

font-family:Times New Roman;

font-weight:bold;

line-height:30px;

float:left;

}

tr.jsw, tr,jss

{

width:59px;

color:#FFFFFF;

}

tr.jcb

{

color:#f5a9f2;

}

tr.jss

{

text-align:right;

}

tr.jcr

{

background:#FF0000;

color:#0000FF;

}

tr.jsc

{

width:59px;

color:#f5a9f2;

}

tr.jsu

{

width:59px;

color:#a9d0f5;

}

tr.jcb

{

color:#f5a9f2;

}

td.jcc

{

color:#f5a9f2;

border-color:#0000FF;

}

td.jcu

{

color:#a9d0f5;

}

td.of

{

border-right: 10px solid yellow;

color:#f5a9f2;

}

td.on

{

background:#a9d0f5;

border-right: 10px solid grey;

color:#0000FF;

}

td.jcw

{

color:#FFFFFF;

}

.jp

{

width:300px;

}

js1, jc1

{

width:20px;

}

js2, jc2

{

width:59px;

}

js3, jc3

{

width:100px;

}

js4, jc4

{

width:155px;

}

js5, jc5

{

width:49px;

}

js6

{

width:66px;

}

jc6

{

width:48px;

}

</style>

</head>

2. Buat satu tabel untuk package / pembungkusnya (kode tabel pada no.2 ini letakkan dibawah kode CSS pada no.1 diatas).

Kodenya :

<body>

<table border= "1" class="jp">

<tr><td>

Disini nanti letakkan kode tabel pada no.3 dan 4 yaitu tabel untuk header dan tabel yang kita beri scroll bar (Ganti text merah ini dengan kode tabel pada no.3 kemudian kode tabel no.4)

</td></tr>

</table>

</body>

</html>

3. Buat satu tabel untuk headernya :

Kodenya :

<table border="0"cellspacing="1" cellpadding="0" class="jh">

<tr class="jsw">

<td colspan=7>

JADWAL KULIAH IF.11 - SEMESTER IV 2010</td>

</tr>

<tr class="jcr">

<td><js1>No</js1></td>

<td><js2>Hari</js2></td>

<td><js2>Tanggal</js2></td>

<td><js3>Waktu</js3></td>

<td><js4>Mata Kuliah</js4></td>

<td><js5>Ruang</js5></td>

<td><js6>Dosen</js6></td>

</tr>

</table>

4. Kemudian buat satu tabel yang kita beri scroll bar-nya :

Kodenya :

<div class = "scroll">

<table border= "0" cellspacing="1" cellpadding="0">

<tr class="jsc">

<td rowspan=2>01</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>18/04</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>02</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>24/04</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>03</td>

<td>Minggu</td>

<td>25/04</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>04</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>01/05</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>01</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>18/04</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>02</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>24/04</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>03</td>

<td>Minggu</td>

<td>25/04</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>04</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>01/05</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>01</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>18/04</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>02</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>24/04</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>03</td>

<td>Minggu</td>

<td>25/04</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>04</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>01/05</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>05</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>02/05</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>06</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>08/05</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>07</td>

<td>Minggu</td>

<td>09/05</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>08</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>15/05</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>09</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>16/05</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>10</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>22/05</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>11</td>

<td>Minggu</td>

<td>23/05</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>12</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>29/05</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>13</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>30/05</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>14</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>05/06</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>15</td>

<td>Minggu</td>

<td>06/06</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>16</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>12/06</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>17</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>13/06</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>18</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>19/06</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>19</td>

<td>Minggu</td>

<td>20/06</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsu">

<td colspan=7 align="center">

<blink>U T S</blink></td>

</tr>

<tr class="jsu">

<td>01</td>

<td>Sabtu</td>

<td>26/06</td>

<td>13:30</td>

<td>Aljabar Linier</td>

<td>310</td>

<td>SSB</td>

</tr>

<tr class="jsu">
<td>02</td>

<td>Minggu</td>

<td>27/06</td>

<td>11:00</td>

<td>Jaringan Komputer</td>

<td>310</td>

<td>REN</td>

</tr>

<tr class="jsu">
<td rowspan=2>03</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>03/07</td>

<td>13:30</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsu">
<td>16:00</td>

<td>Teori Bahasa Otomata</td>

<td>310</td>

<td>SYR</td>

</tr>

<tr class="jsu">
<td rowspan=2>04</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>04/07</td>

<td>13:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsu">
<td>16:00</td>

<td>Grafik Komputer</td>

<td>310</td>

<td>SIS</td>

</tr>

<tr class="jsu">
<td>05</td>

<td>Sabtu</td>

<td>10/07</td>

<td>16:00</td>

<td>Pemrograman Web</td>

<td>310</td>

<td>MMG</td>

<tr class="jsu">

<td colspan=7 align="center">

<blink>I F . 1 1</blink></td>

</tr>

<tr>

<td rowspan=2 class="jcc">

<jc1>*<br>*<br>*</td>

<td colspan=2 class="jcu">

Minggu<br>11 Juli 2010</br></td>

<td rowspan=2 class="of"

onmouseover="this.className='on'"

onmouseout="this.className='of'">

Free<br>Evening</td>

<td colspan=3 rowspan=2 class="jcw">

NOBER Piala Dunia Di Kampus</td>

</tr>

<tr><td></td>

</tr>

<tr class="jsw">

<td rowspan=2>20</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>17/07</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>21</td>

<td>Minggu</td>

<td>18/07</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>22</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>24/07</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>23</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>25/07</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>24</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>31/07</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>25</td>

<td>Minggu</td>

<td>01/08</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>26</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>07/08</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>27</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>08/08</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>28</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>14/08</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jsc">

<td>29</td>

<td>Minggu</td>

<td>15/08</td>

<td>12:30 - 15:30</td>

<td>Arsitektur & Org<br>
Komputer</br></td>

<td>310</td>

<td>TRD</td>

</tr>

<tr class="jsw">

<td rowspan=2>30</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>21/08</td>

<td>14:00 - 17:00</td>

<td>Aljabar Linier</td>

<td>309</td>

<td>SSB</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Pemrograman Web</td>

<td>309</jw5></td>

<td>MMG</td>

</tr>

<tr class="jsc">

<td rowspan=2>31</td>

<td rowspan=2>Minggu</td>

<td rowspan=2>22/08</td>

<td>12:30 - 15:30</td>

<td>Jaringan Komputer</td>

<td>309</td>

<td>REN</td>

</tr>

<tr class="jsc">

<td>15:30 - 18:30</td>

<td>Grafik Komputer</td>

<td>309</td>

<td>SIS</td>

</tr>

<tr class="jsw">

<td rowspan=2>32</td>

<td rowspan=2>Sabtu</td>

<td rowspan=2>28/08</td>

<td>14:00 - 17:00</td>

<td>Metode Numerik</td>

<td>309</td>

<td>SYR</td>

</tr>

<tr class="jsw">

<td>18:30 - 21:00</td>

<td>Teori Bahasa Otomata</td>

<td>303</td>

<td>SYR</td>

</tr>

<tr class="jcb" >

<td><jc1>33</jc1></td>

<td><jc2>Minggu</jc2></td>

<td><jc2>29/08</jc2></td>

<td><jc3>12:30 - 15:30</jc3></td>

<td><jc4>Arsitektur & Org

<br>Komputer</br></jc4></td>

<td><jc5>310</jc5></td>

<td><jc6>TRD</jc6></td>

</tr>

<tr class="jss" >

<td colspan=7 rowspan=2>

<br><< Joshaxis >></br></td>

</tr>

<tr><td></td>

</tr>

</table>

</div>

</td>
</tr>

</table>

Selesai...

Note :

Kode <blink>... text ... </blink> pada kode tabel diatas berfungsi untuk membuat text berkedip

Kode tabel ini kreasi Joshaxis seperti di

Terima kasih...

Jakarta, 11 Juli 2010

Joshaxis