Cara Membuat Tabel Responsive di Postingan Blogspot

By
Prabowo
-
0
108

Saat menulis artikel di Blogspot, ada kalanya kita perlu menyajikan data dalam bentuk tabel—baik itu perbandingan produk, jadwal, daftar harga, atau data lainnya. Sayangnya, tabel bawaan di editor Blogspot sering tidak responsif, terutama saat dibuka lewat smartphone.

Jika tidak ditangani, tabel akan terpotong, meluber ke samping, atau sulit dibaca di layar kecil. Karena itu, penting untuk memahami cara membuat tabel responsive di Blogspot agar tampilan blog tetap rapi dan profesional di semua perangkat.

Dalam panduan ini, kamu akan belajar langkah-langkah membuat tabel responsive menggunakan HTML dan CSS di Blogspot, lengkap dengan contoh kode dan tipsnya.

Mengapa Tabel Responsif Itu Penting?

Seiring meningkatnya pengguna internet dari perangkat mobile, responsivitas menjadi faktor utama dalam pengalaman pengguna (UX). Tabel yang tidak responsif:

  • Sulit dibaca di layar kecil

  • Menurunkan kenyamanan pengguna

  • Menyebabkan pengunjung keluar dari blog (bounce rate tinggi)

  • Bisa merusak tampilan keseluruhan halaman

Maka dari itu, pastikan setiap tabel yang kamu buat bisa menyesuaikan ukuran layar secara otomatis.

Cara Dasar Membuat Tabel di Blogspot

Sebelum membuatnya responsif, mari buat dulu struktur tabel biasa:

Contoh Tabel Sederhana

html
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Produk A</td>
<td>Rp50.000</td>
</tr>
<tr>
<td>2</td>
<td>Produk B</td>
<td>Rp75.000</td>
</tr>
</tbody>
</table>

Jika kamu tempelkan di editor Blogspot (HTML mode), tabel ini akan muncul. Namun, belum responsif.

Cara Membuat Tabel Responsive di Blogspot

Untuk membuat tabel tersebut tampil bagus di semua perangkat, kamu perlu membungkusnya dengan <div> dan menambahkan sedikit kode CSS.

Langkah-langkah:

1. Tambahkan CSS Responsif

Masuk ke Tema > Edit HTML, lalu cari </head> dan tempelkan kode berikut sebelumnya:

html
<style>
.table-responsive {
width: 100%;
overflow-x: auto;
}
.table-responsive table {
width: 100%;
border-collapse: collapse;
}
.table-responsive th, .table-responsive td {
padding: 8px;
border: 1px solid #ccc;
text-align: left;
}
</style>

Kode ini membuat tabel punya ruang scroll horizontal di layar kecil, sehingga tidak meluber.

2. Bungkus Tabel dengan <div class="table-responsive">

Kembali ke editor artikel (mode HTML), lalu gunakan struktur berikut:

html
<div class="table-responsive">
<table>
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Produk A</td>
<td>Rp50.000</td>
</tr>
<tr>
<td>2</td>
<td>Produk B</td>
<td>Rp75.000</td>
</tr>
</tbody>
</table>
</div>

Dengan cara ini, ketika dibuka dari smartphone, tabel akan bisa di-scroll ke samping tanpa rusak tampilannya.

Tips Tambahan untuk Tabel Responsif

Tips Penjelasan
Gunakan thead dan tbody Ini membantu Google memahami struktur tabel
Jangan terlalu banyak kolom Maksimal 3–5 kolom agar nyaman di HP
Hindari teks terlalu panjang dalam 1 sel Bikin tabel jadi melebar
Tambahkan warna latar baris Misalnya: baris genap beda warna (striped table)
Gunakan teks rata kiri atau tengah Sesuaikan dengan jenis data

Variasi Desain Tabel Responsif

Kalau kamu ingin tampilan tabel lebih menarik, bisa tambahkan variasi seperti warna latar baris berbeda, atau hover effect. Contohnya:

html
<style>
.table-responsive tr:nth-child(even) {
background-color: #f9f9f9;
}
.table-responsive tr:hover {
background-color: #f1f1f1;
}
</style>

Kode ini bisa kamu tempelkan bersama kode CSS sebelumnya di bagian <head> template blog.

Alternatif: Gunakan Google Sheets (Embed)

Jika kamu ingin menampilkan data tabel yang bisa di-update tanpa masuk ke Blogspot, gunakan Google Spreadsheet.

Langkah-langkah:

  1. Buat data tabel di Google Sheets.

  2. Klik File > Bagikan > Dapatkan tautan yang dapat dilihat publik.

  3. Klik File > Publikasikan ke web > pilih sheet > format: HTML embed.

  4. Salin kode <iframe> yang diberikan.

  5. Tempelkan ke editor Blogspot (HTML mode).

Contoh kode:

html
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-xxx/pubhtml?widget=true&amp;headers=false" width="100%" height="300"></iframe>

Tabel ini akan otomatis menyesuaikan dan tampil responsif, selama kamu mengatur lebarnya ke 100%.

Kesalahan Umum Saat Membuat Tabel di Blogspot

Kesalahan Dampak
Tidak membungkus tabel dengan <div> Tabel rusak di mobile
Memakai tabel bawaan dari Word/Excel Struktur HTML jadi berantakan
Menggunakan tag <table> di mode Compose Bisa rusak formatnya
Tidak mengecek tampilan di HP UX buruk, pembaca bisa kabur

Kesimpulan

Membuat tabel di Blogspot memang mudah, tapi membuatnya responsif dan enak dilihat di semua perangkat butuh sedikit penyesuaian.

RELATED ARTICLESMORE FROM AUTHOR