Halo. Blog Igniel akan membagikan tutorial sederhana yaitu cara untuk membuat table HTML responsif di Blogger (Blogspot). Tutorial ini muncul karena salah satu hal yang paling sering dikeluhkan pengakses blog, baik itu pengelola maupun pengunjung, adalah bentuk table yang kurang mobile friendly. Ketika dibuka di perangkat lebih kecil seperti smartphone, table menjadi terpotong tidak karuan.
Sebenarnya bentukan table memang tidak otomatis responsif dari sananya. Saat kita memakai tag HTML table standar, cukup sulit untuk mengubahnya menjadi responsif apalagi bagi yang tidak mengerti HTML dan CSS.
Namun pada tutorial kali ini, kode yang dibutuhkan untuk membuat table responsif amat sangat sederhana dan bisa langsung dipraktekan oleh semua orang.
Membuat Table Responsive di Blog Scroll Samping
Selain untuk Blogger (Blogspot), table responsive ini juga bisa dipakai untuk semua platform blog. Kita hanya perlu membungkus tag HTML table ke dalam sebuah <div>. Lebih jelasnya, silakan lihat kode berikut:
<div class="table">
<-- Isi tag HTML table -->
</div>Saya memberi nama class table agar <div> bisa dimodifikasi dengan gampang.
Contoh Penulisan Lengkap
Agar tidak bingung, silakan ikuti langkah-langkah berikut ini untuk membuat table responsif hanya dengan HTML dan CSS.
1. Tambahan Kode CSS
Pertama-tama, tambahkan kode CSS berikut ke dalam tema.
.table {
margin: 1.5rem 0;
overflow: auto;
white-space: nowrap;
}Tambahan. Berikut ini adalah kode CSS dari table sederhana yang saya gunakan. Jika tampilannya ingin sama persis dengan contoh yang saya berikan, silakan copy juga kodenya. Tapi jika ingin tetap menggunakan gaya sebelumnya yang sudah ada, tidak usah di-copy. Maklum ya kalau tampilannya sederhana. Namanya juga hanya untuk contoh.
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
padding: 1rem 1.5rem;
text-align: left;
}
th {
background-color: #008c5f; /* header background color */
color: #fff; /* header text color */
font-weight: 600;
}
tr {
padding: 0;
}
td {
vertical-align: top;
}
tr:nth-child(even) td {
background-color: rgba(0, 0, 0, .075); /* striped background color */
}
Jika sudah, simpan dulu pengaturannya.
2. Buat Table
Pada editor Blogger, pastikan pilih mode HTML, bukan Compose. Copy kode berikut dan ubah teks sesuai kebutuhan. Yang penting struktur HTML-nya tidak diganti ya.
<div class="table">
<table>
<thead>
<tr>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Domisili</th>
<th scope="col">Nilai</th>
<th scope="col">Langganan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rain</td>
<td>rain@email.com</td>
<td>Sukabumi</td>
<td>90</td>
<td>Tidak</td>
</tr>
<tr>
<td>Yanfei</td>
<td>yanfei@email.com</td>
<td>Liyue</td>
<td>100</td>
<td>Ya</td>
</tr>
<tr>
<td>Hayley Williams</td>
<td>hayley@email.com</td>
<td>Jakarta</td>
<td>97</td>
<td>Ya</td>
</tr>
<tr>
<td>Natasha Romanoff</td>
<td>nat@email.com</td>
<td>Cianjur</td>
<td>100</td>
<td>Tidak</td>
</tr>
<tr>
<td>Fulan</td>
<td>fulan@email.com</td>
<td>Bandung</td>
<td>60</td>
<td>Tidak</td>
</tr>
</tbody>
</table>
</div>Selesai. Silakan test dengan cara membuka halaman di perangkat yang lebih kecil seperti smartphone.
Modifikasi Table yang Sudah Terlanjur Diterbitkan
Jika sudah memiliki banyak artikel dan malas untuk mengubah isi table satu-persatu, kamu bisa menggunakan bantuan Javascript agar semua table tersebut otomatis terbungkus ke dalam tag <div class="table">.
- Copy kode CSS yang sudah disebutkan di atas.
- Tambahkan Javascript berikut ke dalam tema.
let igTable = document.querySelectorAll('.post-body table'); if (igTable.length >= 1) { for (let x = 0; x < igTable.length; x++) { let igDiv = document.createElement('div'); igDiv.className = 'table'; igTable[x].parentNode.insertBefore(igDiv, igTable[x]); igDiv.appendChild(igTable[x]); } } - Simpan pengaturan.
Sederhana saja kan cara membuat table responsif di blog scroll samping ini. Tunggu tutorial berikutnya ya. Saya akan membuat beberapa jenis table lain yang sedikit lebih advance agar tampilannya tidak monoton saat mode responsifnya muncul.
