Tabel merupakan salah satu elemen yang sering digunakan dalam artikel blog untuk menyajikan data, perbandingan, daftar harga, spesifikasi, maupun informasi lainnya agar lebih mudah dipahami oleh pembaca. Namun, tabel dengan banyak kolom sering kali tidak tampil dengan baik di perangkat mobile karena ukurannya melebihi lebar layar.
Agar tampilan tabel tetap rapi di semua perangkat, Anda perlu membuat tabel responsive. Dengan teknik ini, tabel dapat digeser ke kanan atau kiri saat dibuka melalui smartphone tanpa merusak tata letak halaman.
Pada tutorial ini, Anda akan mempelajari cara membuat tabel responsive menggunakan HTML dan CSS yang dapat diterapkan pada Blogger maupun platform blog lainnya.
Apa Itu Tabel Responsive?
Tabel responsive adalah tabel yang tetap nyaman digunakan pada berbagai ukuran layar. Jika lebar tabel lebih besar daripada layar perangkat, pengguna dapat menggulir tabel secara horizontal sehingga seluruh isi tetap terlihat.
Teknik ini banyak digunakan pada website modern karena mampu menjaga tampilan tetap rapi di desktop, tablet, maupun smartphone.
Keuntungan Menggunakan Tabel Responsive
Menggunakan tabel responsive memiliki beberapa manfaat, di antaranya:
Tampilan tabel tetap rapi di semua perangkat.
Pengunjung lebih mudah membaca isi tabel.
Mencegah layout blog menjadi rusak.
Mendukung tampilan mobile-friendly.
Meningkatkan pengalaman pengguna (User Experience).
Membantu optimasi SEO karena halaman lebih nyaman diakses melalui perangkat mobile.
Cara Membuat Tabel Responsive
Langkah pertama adalah membungkus elemen <table> menggunakan sebuah <div> dengan class table-responsive,tambahkan kode berikut didalam postingan (mode HTML).
Salin kode HTML berikut.
<div class="table-responsive">
<table>
<thead>
<tr>
<th>No</th>
<th>Elemen</th>
<th>Fungsi</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><table></td>
<td>Membuat tabel</td>
<td>Elemen utama untuk menampilkan data.</td>
</tr>
<tr>
<td>2</td>
<td><thead></td>
<td>Header tabel</td>
<td>Berisi judul setiap kolom.</td>
</tr>
<tr>
<td>3</td>
<td><tbody></td>
<td>Isi tabel</td>
<td>Berisi data yang ditampilkan.</td>
</tr>
<tr>
<td>4</td>
<td>.table-responsive</td>
<td>Responsive</td>
<td>Membuat tabel dapat digeser secara horizontal.</td>
</tr>
<tr>
<td>5</td>
<td>overflow-x:auto</td>
<td>Scroll Horizontal</td>
<td>Menampilkan scrollbar saat ukuran tabel melebihi layar.</td>
</tr>
</tbody>
</table>
</div>
Tambahkan CSS
Setelah membuat struktur HTML, tambahkan CSS berikut didalam tema agar tabel menjadi responsive.
.table-responsive{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin:20px 0;
}
.table-responsive table{
width:100%;
min-width:700px;
border-collapse:collapse;
}
.table-responsive th,
.table-responsive td{
border:1px solid #ddd;
padding:12px;
text-align:left;
}
.table-responsive th{
background:#33AAFF;
color:#fff;
}
.table-responsive tr:nth-child(even){
background:#f7f7f7;
}
Penjelasan CSS
Berikut fungsi dari setiap kode CSS yang digunakan.
| Properti | Fungsi |
|---|---|
| overflow-x:auto | Menampilkan scroll horizontal jika tabel lebih lebar dari layar. |
| min-width:700px | Menentukan lebar minimum tabel agar tetap rapi. |
| border-collapse:collapse | Menggabungkan garis tabel menjadi lebih rapi. |
| padding | Memberikan jarak pada isi sel tabel. |
| background | Memberikan warna pada header tabel. |
| -webkit-overflow-scrolling:touch | Membuat proses scroll lebih halus pada perangkat iOS. |
Hasil Akhir
Jika kode di atas sudah diterapkan:
Pada komputer, tabel akan tampil normal.
Pada tablet, tabel tetap terlihat rapi.
Pada smartphone, tabel dapat digeser ke kanan atau kiri sehingga seluruh data tetap dapat dibaca.
Dengan demikian, artikel tetap terlihat profesional tanpa merusak tampilan halaman.
Tips Membuat Tabel yang Nyaman Dibaca
Agar tabel semakin menarik dan mudah dipahami pembaca, perhatikan beberapa tips berikut.
Gunakan judul kolom yang singkat dan jelas.
Hindari terlalu banyak kolom jika tidak diperlukan.
Berikan padding agar isi tabel lebih lega.
Gunakan warna header yang berbeda dari isi tabel.
Gunakan ukuran font yang mudah dibaca.
Uji tampilan tabel pada desktop dan smartphone sebelum artikel dipublikasikan.
Kesalahan yang Sering Terjadi
Berikut beberapa kesalahan yang sering dilakukan saat membuat tabel di Blogger.
Tidak membungkus tabel dengan
div.table-responsive.Tidak menggunakan
overflow-x:auto.Menggunakan lebar tabel yang terlalu besar.
Mengisi tabel dengan terlalu banyak kolom.
Tidak menguji tampilan pada perangkat mobile.
Menghindari kesalahan tersebut akan membuat tabel lebih nyaman digunakan oleh pengunjung.
Kesimpulan
Membuat tabel responsive merupakan langkah penting untuk meningkatkan kualitas tampilan artikel, terutama bagi pengunjung yang mengakses blog melalui smartphone. Dengan membungkus elemen <table> menggunakan <div class="table-responsive"> serta menambahkan CSS overflow-x:auto, tabel dapat digeser secara horizontal tanpa merusak tata letak halaman.
Selain membuat artikel lebih nyaman dibaca, teknik ini juga membantu menciptakan blog yang mobile-friendly dan memberikan pengalaman pengguna yang lebih baik.
FAQ
Apa itu tabel responsive?
Tabel responsive adalah tabel yang dapat menyesuaikan tampilan pada berbagai ukuran layar. Jika ukuran tabel lebih lebar dari layar perangkat, pengguna dapat menggesernya secara horizontal.
Apakah tabel responsive bisa digunakan di Blogger?
Ya. Teknik ini sepenuhnya kompatibel dengan Blogger dan dapat diterapkan pada postingan maupun halaman statis.
Apakah harus menggunakan JavaScript?
Tidak. Anda cukup menggunakan HTML dan CSS untuk membuat tabel responsive.
Apakah teknik ini mendukung SEO?
Ya. Tabel responsive membantu meningkatkan pengalaman pengguna pada perangkat mobile sehingga mendukung optimasi SEO secara tidak langsung.
Bagaimana cara mengetahui tabel sudah responsive?
Anda dapat membuka artikel melalui smartphone atau menggunakan fitur Inspect pada browser untuk melihat tampilan pada berbagai ukuran layar. Jika tabel dapat digeser ke kanan dan kiri tanpa merusak layout, berarti tabel sudah responsive.