Tabel dengan scroll dan header tetap menggunakan HTML, contoh 6

Jika kita mempunyai dabel data yang cukup panjang kebawah, kita bisa membuat 'scroll' pada isi tabel sedangkan headernya tetap agar mempermudah ketika kita membaca data.

Berikut ini merupakan contoh tabel dengan scroll arah vertical.


Prinsipnya, kita membuat dua tabel, yang pertama untuk header dan kedua untuk isi, dengan lebar (width) setiap field (kolom) kita tetapkan. Dalam contoh ini, CSS Style digunakan untuk memformat tabel seperti warna, background dan garis batas. Penjelasan tentang kode pada CSS Style ada pada Membuat tabel, contoh 1 sampai 4 di blog ini.



Tampilan tabel yang diinginkan

Kelas	Nama	Nilai			Rata-rata
		Fisika	Kimia	Biologi

IPA 1	Maria	75	75	75	75
	Ferdy	85	75	80	80
	Thalia	70	80	75	75
	Donny	75	75	75	75
IPA 2	Mirna	80	70	75	75
	Ali	75	85	80	80
	Dinda	75	75	75	75
	Surya	95	90	85	90
	Erika	75	85	80	80

CSS dan HTML yang digunakan

<style>
#tabel6 {
    border: 2px solid Gainsboro;
}

#tabel6 tr:nth-child(even) {
    background-color: Thistle ;
}
#tabel6 tr:nth-child(odd) {
    background-color:WhiteSmoke;
}

#tabel6 th {
     height:22px;
     background-color: DarkOrchid;
     color : white;
}

#tabel6 td {
   color : darkviolet;
   text-align : center;
}

#tabel6 tr:hover {
    background-color:MistyRose;
}

#tabel6 td:hover {
   background-color:LightPink;
}

</style>


 <div>
<table align="left" id="tabel6">
<tbody>
<tr><th rowspan="2" width="70 px">Kelas</th><th rowspan="2" width="100px">Nama</th>  
    <th colspan="3" width="210px">Nilai</th><th rowspan="2" width="88px">Rata-rata</th></tr>
<tr><th width="70px">Fisika</th>
    <th width="70">Kimia</th>
    <th width="70">Biologi</th>
</tr>
</tbody>
</table>
</div>
<div style="height: 210px; overflow-y: scroll; width: 498px;">
<table align="center" id="tabel6">
<tbody>
<tr>
<th rowspan="4" width="70px">IPA 1</th>
<td width="100px">Maria</td>
<td width="70px">75</td>
<td width="70px">75</td>
<td width="70px">75</td>
<td width="70px">75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Ferdy</td>
<td>85</td>
<td>75</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Thalia</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Donny</td>
<td>75</td>
<td>75</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<th rowspan="5" width="40">IPA 2</th>
<td style="padding: 5px; text-align: left;">Mirna</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Ali</td>
<td>75</td>
<td>85</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Dinda</td>
<td>75</td>
<td>75</td>
<td>75</td>
<td>75</td>
</tr>
<tr>
<td style="padding: 5px; text-align: left;">Surya</td>
<td>95</td>
<td>90</td>
<td>85</td>
<td>90</td>
</tr>
<tr><td style="padding: 5px; text-align: left;">Erika</td>
<td>75</td>
<td>85</td>
<td>80</td>
<td>80</td>
</tr>
</tbody></table>
</div>