Cara Membuat Table HTML Responsif Sederhana

Hallo. Blog Igniel akan membagikan tutorial sederhana yaitu cara untuk membuat table HTML responsif di semua perangkat. Ini 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 responsive amat sangat sederhana dan bisa langsung dipraktekan oleh semua orang.

Membuat Table Responsive Scroll Samping

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>[email protected]</td>
        <td>Sukabumi</td>
        <td>90</td>
        <td>Tidak</td>
      </tr>
      <tr>
        <td>Yanfei</td>
        <td>[email protected]</td>
        <td>Liyue</td>
        <td>100</td>
        <td>Ya</td>
      </tr>
      <tr>
        <td>Hayley Williams</td>
        <td>[email protected]</td>
        <td>Jakarta</td>
        <td>97</td>
        <td>Ya</td>
      </tr>
      <tr>
        <td>Natasha Romanoff</td>
        <td>[email protected]</td>
        <td>Cianjur</td>
        <td>100</td>
        <td>Tidak</td>
      </tr>
      <tr>
        <td>Fulan</td>
        <td>[email protected]</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">.

  1. Copy kode CSS yang sudah disebutkan di atas.
  2. 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]);  
        }
    }
  3. Simpan pengaturan.

Sederhana saja kan cara membuat table responsif 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.

SHARE Pin Share
Posting Komentar
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!