Pada Microsoft Excel sering ditemui sebuah file dengan baris dan kolom yang posisinya menempel dan tidak bergerak saat halaman di-scroll ke bawah atau samping. Fitur tersebut bernama freeze row and column. Kali ini blog Igniel akan membagikan tutorial untuk membuat fitur yang sama namun versi HTMLnya agar bisa dipakai di blog. Berikut adalah cara membuat table HTML di Blogger (Blogspot) dengan baris dan kolom hader yang tidak bergerak seperti Microsoft Excel.
Table Sticky Header dan Column ala Ms. Excel
Selain untuk Blogger, table freeze header dan kolom ini juga bisa digunakan untuk semua jenis platform ngeblog ya, termasuk WordPress.
Tabel jenis ini berguna saat kamu memiliki data yang cukup banyak untuk ditampilkan. Selain itu, tabel ini pun sering dipakai untuk menampilkan poin dan info lain dari sebuah pertandingan olahraga, sebut saja misalnya sepak bola. Jadi ada juga yang menyebutnya sebagai tabel klasemen.
Tabel ini dibuat menggunakan kode semantik HTML biasa pada umumnya. Kode semantik sangat penting agar browser dapat membaca sebuah elemen dengan benar. Misalnya saat membuat sebuah tabel, kode yang digunakan ya sebaiknya pakai <table>, bukan </div>. Elemen semantik juga disukai mesin pencari sehingga bagus untuk SEO.
Kamu hanya perlu menambahkan class baru pada baris atau kolom untuk membuatnya diam di tempat seperti membeku (freeze).
1. Tambahkan Kode CSS
Sebagai permulaan, simpan dulu kode CSS berikut di pengaturan blog. Tampilan tabel ini cukup sederhana karena hanya contoh saja. Jadi kalau kamu merasa tabelnya kurang berwarna, silakan atur sendiri ya.
/* HTML Table Freeze Column and Row by igniel.com */
.table-freeze {
height: 80vh;
margin: 2rem 0;
overflow: auto;
scroll-snap-type: both mandatory;
white-space: nowrap;
}
.table-freeze .table {
margin: 0;
overflow: unset;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
padding: 1rem 2.5rem;
text-align: left;
}
thead th {
border-bottom: 1px solid #ccc;
font-weight: 600;
top: 0;
z-index: 1;
}
th.tp {
background-color: #fff;
z-index: 2;
}
tbody th {
left: 0;
text-align: left;
}
tbody th, th.tp {
border-right: 1px solid #ccc;
}
tr {
padding: 0;
}
td {
color: #555;
vertical-align: top;
}
tbody tr:nth-child(odd) th {
background-color: #fff;
}
thead th, tbody tr:nth-child(even) th, tr:nth-child(even) td {
background-color: #f4f4f4; /* striped background color */
}
thead th, tbody th {
position: sticky;
-webkit-position: sticky;
}
@media screen and (max-width: 680px) {
.table-freeze {height: 70vh}
}
@media screen and (max-width: 480px) {
.table-freeze {height: 60vh}
}
Perhatikan yang ditandai. Itu berfungsi untuk membatasi tabel agar tidak terlalu memanjang ke bawah. Jika data yang ditampikan tidak begitu banyak, hapus saja tidak apa-apa kok. Tapi akan berkemungkinan menghilangkan sticky dari header (sticky baris pinggir masih bisa).
2. Buat Tabel
Sekarang masuk ke bagian pentingnya. Salin kode ini ke dalam postingan untuk menampilkan tabel. Ingat ya, pilih mode HTML, bukan Compose.
Kode berikut terlihat panjang karena saya menuliskan banyak kolom dan label sebagai contoh. Sebenarnya sama saja kok kodenya dengan HTML tabel biasa. Teksnya ubah saja sesuai kebutuhan.
<!-- HTML Table Freeze Column and Row by igniel.com -->
<div class="table-freeze">
<table>
<thead>
<tr>
<th class="tp" scope="col"></th>
<th scope="col">Satu</th>
<th scope="col">Dua</th>
<th scope="col">Tiga</th>
<th scope="col">Empat</th>
<th scope="col">Lima</th>
<th scope="col">Enam</th>
<th scope="col">Tujuh</th>
<th scope="col">Delapan</th>
<th scope="col">Sembilan</th>
<th scope="col">Sepuluh</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Klub 1</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 2</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 3</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 4</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 5</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 6</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 7</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 8</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 9</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
<tr>
<th scope="row">Klub 10</th>
<td scope="row">Satu</td>
<td scope="row">Dua</td>
<td scope="row">Tiga</td>
<td scope="row">Empat</td>
<td scope="row">Lima</td>
<td scope="row" >Enam</td>
<td scope="row">Tujuh</td>
<td scope="row">Delapan</td>
<td scope="row">Sembilan</td>
<td scope="row">Sepuluh</td>
</tr>
</tbody>
</table>
</div>3. Demo
Hasilnya bisa dilihat langsung pada tabel di bawah ini. Atau cek Codepen saya.
| Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh | |
|---|---|---|---|---|---|---|---|---|---|---|
| Klub 1 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 2 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 3 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 4 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 5 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 6 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 7 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 8 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 9 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
| Klub 10 | Satu | Dua | Tiga | Empat | Lima | Enam | Tujuh | Delapan | Sembilan | Sepuluh |
Kenapa Tidak Berhasil?
Jika header kolom dan baris tidak menjadi sticky, maka ada dua kemungkinan:
- Nilai yang saya sebutkan yaitu height: 80vh terlalu besar, sementara data yang ditampilkan tidak sepanjang itu. Solusinya, ganti nilai 80 menjadi lebih kecil.
- Atau karena bentrok dengan kode CSS yang sudah ada sebelumnya.
Solusinya, tambahkan class .post-body di depan semua selector yang sudah saya tulis. Ingat ya, SEMUA. Misalnya ini kode CSS yang tadi:
.table-freeze {
...
}
.table-freeze .table {
...
}
table {
...
}
th, td {
...
}
thead th {
...
}
....dst pokoknya pilih semua....Ubah jadi begini:
.post-body .table-freeze {
...
}
.post-body .table-freeze .table {
...
}
.post-body table {
...
}
.post-body th, .post-body td {
...
}
.post-body thead th {
...
}
....dst ingat ya ubah semua....Sekian panduan untuk membuat tabel klasemen HTML freeze kolom dan baris seperti Excel. Semoga mudah dipahami dan mudah pula diaplikasikan.
