Tabel Dengan Scroll Dan Header Tetap Memakai Html, Rujukan 6

Jika kita memiliki dabel data yang cukup panjang kebawah, kita dapat menciptakan 'scroll' pada isi tabel sedangkan headernya tetap biar mempermudah dikala kita membaca data.

Berikut ini merupakan referensi tabel dengan scroll arah vertical.


Prinsipnya, kita menciptakan dua tabel, yang pertama untuk header dan kedua untuk isi, dengan lebar (width) setiap field (kolom) kita tetapkan. Dalam referensi ini, CSS Style dipakai untuk memformat tabel ibarat warna, background dan garis batas. Penjelasan perihal arahan pada CSS Style ada pada Membuat tabel, referensi 1 hingga 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>