Cara Membuat Tabel Responsif Sederhana di Blog

Cara Membuat Tabel Responsif Sederhana di Blog

#StaySafe HNFISLMN Januari 13, 2022

Halo. Blog HNFISLMN 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.

Selamat membaca artikel Cara Membuat Tabel Responsif Sederhana di Blog. Jangan lupa untuk support web kami dengan like, comment dan share. Kunjungi terus HNFISLMN untuk artikel bermanfaat lainnya. Thanks ~