Cara Membuat Tabel Responsif di Blogger Tanpa JavaScript

Untuk membuat tabel responsif di Blogger tanpa JavaScript, tempatkan tabel HTML di dalam pembungkus dengan overflow-x:auto. Ketika tabel lebih lebar daripada ruang artikel, pembaca dapat menggulir bagian tabel ke samping. Cara ini mempertahankan hubungan baris dan kolom, sambil membantu menghindari tabel yang melebar ke luar area bacaan.

Pembungkus gulir tidak otomatis mengecilkan semua kolom atau mengubah tabel menjadi kartu. Anda tetap perlu memilih data, ukuran minimum, dan teks yang nyaman dibaca. Contoh di bawah memakai HTML serta CSS inline pada isi postingan, tanpa memasang skrip atau mengubah template.

Pilih tabel untuk data yang memang perlu dibandingkan

Tabel cocok untuk informasi dengan hubungan baris dan kolom, misalnya jadwal, spesifikasi, atau daftar pemeriksaan beberapa perangkat. Dokumentasi elemen table MDN menjelaskan fungsi tabel sebagai penyajian data tabular. Jika isinya hanya dua kalimat yang tidak perlu dibandingkan, paragraf atau daftar biasa mungkin lebih mudah dibaca.

Mulailah dari kolom yang benar-benar diperlukan. Pecah pembahasan yang terlalu luas sebelum memperkecil huruf demi memuat semuanya. Tabel dengan banyak kolom panjang masih dapat menyulitkan pembaca meskipun sudah bisa digulir.

Untuk membuat area gulir, contoh memakai properti yang dijelaskan dalam panduan overflow MDN. Pembungkus dibatasi mengikuti ruang yang tersedia, sedangkan tabel mempunyai lebar minimum. Jika ruang lebih kecil, bagian yang melampaui pembungkus dapat ditelusuri melalui guliran horizontal.

Contoh HTML lengkap dengan caption dan header

Contoh ini berisi daftar pemeriksaan ilustratif, bukan hasil pengujian situs tertentu. Salin kode yang ditampilkan, lalu sesuaikan judul serta isinya. Angka 36rem adalah pilihan ukuran contoh; uji kembali ketika jumlah kolom atau isi sel berubah.

<p>Geser tabel ke samping bila kolom belum terlihat seluruhnya.</p>
<div role="region" aria-labelledby="caption-checklist-blog"
     tabindex="0" style="max-width:100%;overflow-x:auto;margin:1em 0;">
  <table style="width:100%;min-width:36rem;border-collapse:collapse;">
    <caption id="caption-checklist-blog" style="text-align:left;padding:0.75rem 0;font-weight:bold;">
      Contoh checklist penyesuaian blog
    </caption>
    <thead>
      <tr>
        <th scope="col" style="border:1px solid #cbd5e1;padding:0.75rem;text-align:left;">Bagian</th>
        <th scope="col" style="border:1px solid #cbd5e1;padding:0.75rem;text-align:left;">Desktop</th>
        <th scope="col" style="border:1px solid #cbd5e1;padding:0.75rem;text-align:left;">Ponsel</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" style="border:1px solid #cbd5e1;padding:0.75rem;text-align:left;">Menu</th>
        <td style="border:1px solid #cbd5e1;padding:0.75rem;">Periksa tujuan tautan.</td>
        <td style="border:1px solid #cbd5e1;padding:0.75rem;">Periksa tombol buka dan tutup.</td>
      </tr>
      <tr>
        <th scope="row" style="border:1px solid #cbd5e1;padding:0.75rem;text-align:left;">Gambar</th>
        <td style="border:1px solid #cbd5e1;padding:0.75rem;">Periksa ketajaman tampilannya.</td>
        <td style="border:1px solid #cbd5e1;padding:0.75rem;">Periksa kesesuaian lebarnya.</td>
      </tr>
    </tbody>
  </table>
</div>

Panduan caption W3C WAI menjelaskan kegunaannya untuk mengenali dan memahami tabel. Pada contoh, caption juga memberi nama area gulir melalui aria-labelledby. Nilai atribut tersebut menunjuk ke ID caption yang benar-benar ada.

Baris pertama memakai header kolom, sedangkan “Menu” dan “Gambar” menjadi header baris. Panduan tabel dua arah W3C WAI menggunakan scope="col" dan scope="row" untuk memperjelas hubungan header dengan data. Warna tebal saja tidak menggantikan penandaan tersebut.

Masukkan ke HTML postingan dan simpan sebagai draf

Siapkan salinan isi sebelum mengedit artikel yang sudah ada. Jika perubahan dilakukan bersama penyesuaian lain, gunakan juga panduan backup Blogger dan pencatatan konfigurasi agar kondisi sebelumnya mudah ditelusuri.

1. Buka postingan yang akan diberi tabel.
2. Alihkan mode editor ke Tampilan HTML atau HTML view; letak kontrol dapat mengikuti antarmuka akun.
3. Tempel contoh pada posisi yang diperlukan dalam isi, lalu ganti data ilustratifnya.
4. Pastikan setiap baris tetap mempunyai jumlah sel yang sesuai dengan header.
5. Simpan sebagai draf dan buka pratinjau untuk memeriksa hasilnya.

Panduan postingan Blogger menjelaskan penyimpanan draf dan penggunaan Pratinjau. Anda tidak perlu masuk ke Edit HTML tema untuk memasang contoh ini. Gaya inline pada kode diterapkan pada komponen tersebut; tetap periksa hasilnya karena aturan tema dapat memengaruhi tampilan akhir.

Jika menambahkan tabel kedua pada halaman yang sama, beri caption ID baru dan sesuaikan aria-labelledby pembungkusnya. Jangan menggandakan ID hanya karena tabelnya disalin dari contoh yang sama.

Uji guliran, hubungan data, dan akses keyboard

Pada layar ponsel

Buka pratinjau pada layar sempit. Geser tabel sampai kolom terakhir, kemudian kembali ke kolom awal. Periksa bahwa paragraf di luar tabel tetap mengikuti lebar halaman. Jika seluruh halaman ikut melebar, telusuri elemen yang melampaui pembungkus atau gaya tema yang membatasi perilaku gulir.

Baca satu baris dari kiri ke kanan. Pastikan pembaca masih dapat memahami kolom yang sedang dilihat. Gunakan nama kolom singkat dan isi sel yang ringkas. Untuk pilihan ukuran teks serta kontras, lihat panduan warna dan tipografi Blogger yang nyaman dibaca.

Pada komputer dengan keyboard

Gunakan Tab untuk mencapai area tabel, lalu coba tombol arah ketika area tersebut mempunyai fokus. Contoh memakai tabindex="0" karena sebagian browser tidak menjadikan area gulir dapat difokuskan secara otomatis. MDN juga menyarankan nama yang dapat diakses dan peran yang sesuai agar pembaca layar mendapat konteks.

Pertahankan indikator fokus. Jangan menambahkan outline:none hanya untuk menghilangkan garis saat fokus. Jika tema sudah menyembunyikannya, catat sebagai masalah yang perlu diperiksa. tabindex dipakai pada area gulir yang membutuhkan akses keyboard, bukan pada setiap sel tabel.

Pengujian ini dapat menjadi bagian dari pemeriksaan fungsi template portal berita. Catat perangkat, browser, dan bagian yang belum dapat digunakan dengan nyaman.

Perbaiki isi terlebih dahulu ketika tabel masih sulit dipakai

Jika pembaca harus menggulir terlalu jauh untuk memahami satu hubungan data, pertimbangkan membagi tabel menurut topik. Periksa apakah sebagian kolom sebenarnya dapat dijelaskan dalam paragraf sebelum atau sesudah tabel. Jangan menyembunyikan informasi penting hanya agar tabel terlihat pendek.

Untuk URL atau istilah yang sangat panjang, rapikan cara penyajiannya tanpa mengubah makna. Uji lagi setelah data nyata dimasukkan. Tabel contoh yang pendek tidak membuktikan bahwa semua variasi konten akan nyaman pada tema yang sama.

Catat perubahan ukuran minimum, jumlah kolom, atau nama caption. Saat menambah baris, pertahankan struktur header dan periksa kembali jumlah sel. Tabel bertingkat yang lebih kompleks mungkin memerlukan hubungan header lebih rinci daripada contoh sederhana ini.

Gunakan hasil pemeriksaan sebagai ukuran keberhasilan

Tabel sudah berguna ketika data dapat dibaca, kolom yang melampaui layar tetap terjangkau, dan navigasi keyboard dapat digunakan dengan indikator fokus yang jelas. Keberhasilan tersebut perlu dinilai pada isi serta perangkat yang memang dipakai pembaca.

Contoh ini tidak menyertakan hasil benchmark dan tidak menjanjikan peningkatan ranking atau pengindeksan. Fokusnya adalah menyajikan data dengan struktur yang jelas dan area gulir yang dapat digunakan. Simpan versi draf sampai contoh data, tata letak, dan interaksinya selesai diperiksa.