Cara Membuat Tabel Responsif Sederhana di Blog

Cara mudah membuat table responsive di blog hanya dengan CSS agar bisa di-scroll ke samping. Tampilan tabel akan bergeser dan tidak berantakan.

Halo. Blog Igniel 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">.

  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 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.

4
Cara Membuat Tabel Responsif Sederhana di Blog
Cara Membuat Tabel Responsif Sederhana di Blog
Cara mudah membuat table responsive di blog hanya dengan CSS agar bisa di-scroll ke samping. Tampilan tabel akan bergeser dan tidak berantakan.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

4 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • indoline
    23 November, 2023
    Profil: https://www.blogger.com/profile/07891269590265736694
    kenapa di wordpress saya tidak bisa ya, coba tolong di cek admin website nya www.indoline.info , tolong admin sudah pusing saya cari kode nya
  • Zip
    06 Juni, 2022
    Profil: https://www.blogger.com/profile/16368072689704679044
    java'nya di taro dmn tan..?
    di b:skin, head, body atau di dalem style
    • Catatan Surga
      22 September, 2022
      Profil: https://www.blogger.com/profile/15298016546575165496
      Mnurutku taruh dimana aja yang terpenting trbungkus dngan tag script
    • Igniel
      14 Oktober, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ya betul. Di dalam tag <script>