Cara Membuat Tabel Responsif di Blogger dengan Label Mobile Friendly

3/26/2026
Cara Membuat Tabel Responsif di Blogger dengan Label Mobile Friendly

Cara membuat tabel responsif di Blogger menjadi salah satu solusi penting bagi Anda yang sering menampilkan data dalam bentuk tabel. Tabel memang sangat berguna untuk menyajikan informasi secara terstruktur, tetapi tampilannya dapat menjadi kurang nyaman ketika artikel dibuka menggunakan smartphone dengan layar yang lebih kecil.

Jika tabel menggunakan banyak kolom tanpa optimasi responsif, pengunjung mungkin harus menggeser layar secara horizontal atau memperbesar halaman agar seluruh data dapat dibaca. Kondisi tersebut dapat membuat pengalaman membaca menjadi kurang nyaman.

Melalui teknik yang akan dibahas dalam tutorial ini, tabel dapat diubah menjadi tampilan yang lebih fleksibel pada perangkat mobile. Setiap data pada baris tabel akan memiliki label otomatis sehingga informasi tetap mudah dipahami meskipun ukuran layar lebih sempit.

Apa Itu Tabel Responsif di Blogger?

Tabel responsif adalah tabel yang dapat menyesuaikan tampilannya berdasarkan ukuran layar perangkat. Pada desktop, tabel dapat ditampilkan dalam bentuk baris dan kolom seperti tabel pada umumnya. Sementara pada layar mobile, struktur tabel dapat diubah menjadi tampilan berbentuk blok agar lebih mudah dibaca.

Pada metode ini, atribut data-label digunakan pada setiap elemen <td>. Nilai dari atribut tersebut kemudian dipanggil menggunakan CSS attr(data-label) sehingga nama kolom tetap terlihat pada tampilan mobile.

Teknik ini menggunakan HTML dan CSS sehingga tidak membutuhkan JavaScript tambahan untuk mengubah tampilan tabel.

Mengapa Tabel Blogger Perlu Dibuat Responsif?

Tampilan tabel yang terlalu lebar dapat menjadi masalah ketika artikel dibuka melalui smartphone. Semakin banyak kolom yang digunakan, semakin besar kemungkinan tabel tidak muat dalam area konten.

Dengan menggunakan desain responsif, informasi yang sama dapat disajikan dalam format yang lebih sesuai dengan ukuran layar.

Contohnya, tabel desktop berikut:

Nama | Email | Status

dapat berubah menjadi tampilan seperti:


Nama    : Andi
Email   : andi@email.com
Status  : Aktif

Dengan format tersebut, pengunjung tidak perlu menggeser tabel ke kanan dan kiri hanya untuk membaca setiap kolom.

Manfaat Membuat Tabel Responsif dengan Label

Penggunaan tabel responsif memberikan beberapa manfaat terutama untuk tampilan artikel pada perangkat mobile.

  • Lebih nyaman dibaca di smartphone karena data dapat ditampilkan secara vertikal.
  • Mengurangi kebutuhan scroll horizontal pada tabel dengan beberapa kolom.
  • Label kolom tetap terlihat sehingga pembaca mengetahui informasi dari setiap data.
  • Tampilan artikel menjadi lebih rapi pada berbagai ukuran layar.
  • Tidak membutuhkan JavaScript tambahan untuk fungsi responsif dasar.
  • Mudah diterapkan pada artikel Blogger menggunakan HTML dan CSS.

Contoh Struktur Tabel Responsif Blogger

Berikut contoh tabel sederhana dengan tiga kolom, yaitu Nama, Email, dan Status.


<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Nama</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td data-label="Nama">Andi</td>
        <td data-label="Email">andi@email.com</td>
        <td data-label="Status">Aktif</td>
      </tr>

      <tr>
        <td data-label="Nama">Budi</td>
        <td data-label="Email">budi@email.com</td>
        <td data-label="Status">Nonaktif</td>
      </tr>
    </tbody>
  </table>
</div>

Perhatikan bagian data-label pada setiap sel tabel. Nilainya harus sesuai dengan nama kolom yang terdapat pada bagian <th>.

Kode CSS Tabel Responsif untuk Blogger

Setelah struktur HTML dibuat, tambahkan CSS berikut untuk mengatur tampilan tabel pada desktop dan perangkat mobile.


.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

.table-responsive th,
.table-responsive td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

@media screen and (max-width: 768px) {

  .table-responsive thead {
    display: none;
  }

  .table-responsive table,
  .table-responsive tbody,
  .table-responsive tr,
  .table-responsive td {
    display: block;
    width: 100%;
  }

  .table-responsive tr {
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
  }

  .table-responsive td {
    position: relative;
    text-align: right;
    padding-left: 50%;
    box-sizing: border-box;
  }

  .table-responsive td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    font-weight: bold;
    text-align: left;
  }

}

Penjelasan CSS Tabel Responsif

1. Container Tabel


.table-responsive {
  width: 100%;
  overflow-x: auto;
}

Container digunakan sebagai pembungkus tabel. overflow-x: auto juga berfungsi sebagai pengaman apabila terdapat tabel tertentu yang masih membutuhkan scroll horizontal.

2. Lebar Tabel


.table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

Pengaturan tersebut membuat tabel menggunakan lebar container yang tersedia dan menggabungkan garis antar-cell agar tampilan lebih rapi.

3. Tampilan Header dan Cell


.table-responsive th,
.table-responsive td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

CSS tersebut memberikan jarak dalam cell, garis pembatas, serta perataan teks.

4. Media Query untuk Mobile


@media screen and (max-width: 768px)

Media query digunakan untuk menjalankan aturan CSS khusus ketika lebar layar berada pada ukuran tertentu, misalnya smartphone dan sebagian tablet.

5. Menyembunyikan Header Tabel


.table-responsive thead {
  display: none;
}

Pada tampilan mobile, bagian header tabel disembunyikan karena nama setiap kolom akan ditampilkan kembali melalui atribut data-label.

6. Menampilkan Label Menggunakan CSS


content: attr(data-label);

Bagian inilah yang membuat label seperti Nama, Email, dan Status muncul kembali di setiap data ketika tabel berubah menjadi tampilan mobile.

Kode HTML Lengkap Tabel Responsif Blogger

Jika Anda ingin langsung mencoba tanpa memisahkan CSS dan HTML, gunakan kode lengkap berikut.


<style>

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

.table-responsive th,
.table-responsive td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

@media screen and (max-width: 768px) {

  .table-responsive thead {
    display: none;
  }

  .table-responsive table,
  .table-responsive tbody,
  .table-responsive tr,
  .table-responsive td {
    display: block;
    width: 100%;
  }

  .table-responsive tr {
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
  }

  .table-responsive td {
    position: relative;
    text-align: right;
    padding-left: 50%;
    box-sizing: border-box;
  }

  .table-responsive td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    font-weight: bold;
    text-align: left;
  }

}

</style>

<div class="table-responsive">

  <table>

    <thead>
      <tr>
        <th>Nama</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>

    <tbody>

      <tr>
        <td data-label="Nama">Andi</td>
        <td data-label="Email">andi@email.com</td>
        <td data-label="Status">Aktif</td>
      </tr>

      <tr>
        <td data-label="Nama">Budi</td>
        <td data-label="Email">budi@email.com</td>
        <td data-label="Status">Nonaktif</td>
      </tr>

    </tbody>

  </table>

</div>

Cara Memasang Tabel Responsif di Blogger

Teknik ini dapat digunakan langsung pada artikel tanpa harus mengubah keseluruhan template Blogger.

Langkah 1: Buka Artikel Blogger

Masuk ke dashboard Blogger kemudian buat artikel baru atau buka artikel yang ingin ditambahkan tabel.

Langkah 2: Pilih Mode HTML

Ubah editor Blogger dari mode penulisan biasa ke Tampilan HTML.

Langkah 3: Tempelkan Kode

Tempelkan kode tabel responsif pada lokasi yang diinginkan di dalam artikel.

Langkah 4: Sesuaikan Data

Ganti contoh seperti Andi, Budi, alamat email, dan status dengan data Anda sendiri.

Langkah 5: Periksa Tampilan

Gunakan fitur Pratinjau Blogger untuk melihat hasilnya sebelum artikel dipublikasikan.

Cara Membuat Tabel dengan Banyak Kolom

Metode yang sama dapat digunakan untuk tabel dengan lebih banyak kolom. Anda hanya perlu menambahkan elemen <th> dan <td> sesuai kebutuhan.

Contohnya:


<tr>
  <th>Nama</th>
  <th>Email</th>
  <th>Telepon</th>
  <th>Kota</th>
  <th>Status</th>
</tr>

Kemudian setiap cell harus memiliki data-label yang sesuai:


<tr>
  <td data-label="Nama">Andi</td>
  <td data-label="Email">andi@email.com</td>
  <td data-label="Telepon">08123456789</td>
  <td data-label="Kota">Jakarta</td>
  <td data-label="Status">Aktif</td>
</tr>

Dengan struktur tersebut, setiap informasi tetap mempunyai identitas yang jelas ketika tabel berubah menjadi tampilan mobile.

Tips Membuat Tabel Blogger Lebih Profesional

Selain menggunakan CSS responsif, Anda dapat menyesuaikan desain tabel agar lebih sesuai dengan tampilan template blog.

  • Gunakan padding yang cukup agar teks tidak terlalu rapat.
  • Pilih ukuran font yang tetap nyaman dibaca pada smartphone.
  • Gunakan warna border yang tidak terlalu mencolok.
  • Sesuaikan background tabel dengan desain template.
  • Gunakan judul kolom yang singkat dan mudah dipahami.
  • Hindari terlalu banyak kolom jika informasi dapat disederhanakan.
  • Uji tabel pada desktop dan smartphone sebelum dipublikasikan.

Apakah Tabel Responsif Berpengaruh pada SEO?

Tabel responsif bukan faktor yang secara langsung menjamin peningkatan peringkat artikel di mesin pencari. Namun, tampilan tabel yang lebih mudah digunakan pada perangkat mobile dapat membantu menciptakan pengalaman membaca yang lebih baik.

Untuk optimasi SEO Blogger secara keseluruhan, tetap perhatikan kualitas konten, struktur heading, internal link, optimasi gambar, kecepatan halaman, responsivitas, serta relevansi informasi.

Dengan kata lain, tabel responsif sebaiknya digunakan sebagai bagian dari optimasi tampilan dan pengalaman pengguna, bukan sebagai satu-satunya strategi SEO.

Kesalahan yang Sering Terjadi Saat Membuat Tabel Responsif

1. Lupa Menambahkan Data-Label

Jika atribut data-label tidak ditambahkan pada <td>, label tidak akan muncul ketika tampilan mobile diaktifkan.

2. Data-Label Tidak Sesuai

Pastikan nilai data-label sesuai dengan nama kolom.

Contohnya:


<th>Harga</th>
<td data-label="Harga">Rp50.000</td>

Hindari menggunakan label yang berbeda jika dapat membingungkan pembaca.

3. CSS Bertabrakan dengan Template

Beberapa template Blogger memiliki aturan CSS khusus untuk elemen tabel. Jika terjadi konflik, Anda mungkin perlu menyesuaikan selector atau properti CSS.

4. Tabel Terlalu Kompleks

Tabel dengan terlalu banyak kolom atau struktur bertingkat dapat membutuhkan penyesuaian CSS tambahan agar tetap nyaman digunakan pada perangkat mobile.

FAQ Tabel Responsif Blogger

Bagaimana cara membuat tabel responsif di Blogger?

Gunakan container tabel dengan CSS responsif dan tambahkan atribut data-label pada setiap cell agar nama kolom dapat ditampilkan kembali pada perangkat mobile.

Apakah tabel responsif membutuhkan JavaScript?

Tidak. Teknik pada tutorial ini menggunakan HTML dan CSS sehingga tidak membutuhkan JavaScript tambahan.

Apakah tabel responsif bisa digunakan di HP?

Ya. CSS media query akan mengubah tampilan tabel pada ukuran layar tertentu sehingga informasi dapat ditampilkan dalam format yang lebih sesuai untuk smartphone.

Kenapa tabel Blogger melebar ke samping?

Tabel dapat melebar jika jumlah kolom atau isi data terlalu besar. Container dengan overflow-x auto dapat membantu menangani tabel yang tetap membutuhkan ruang horizontal.

Apa fungsi data-label pada tabel responsif?

Data-label menyimpan nama kolom pada setiap cell. CSS kemudian menggunakan attr(data-label) untuk menampilkan nama tersebut pada tampilan mobile.

Apakah tabel responsif aman digunakan pada template Blogger?

Teknik ini menggunakan HTML dan CSS standar. Namun, hasil akhirnya tetap dapat berbeda tergantung struktur dan aturan CSS yang digunakan oleh template Blogger.

Apakah tabel responsif membantu SEO?

Tabel responsif bukan jaminan peningkatan ranking. Namun, tampilan yang lebih nyaman pada perangkat mobile dapat mendukung pengalaman pengguna yang lebih baik.

Kesimpulan

Cara membuat tabel responsif di Blogger dengan label dapat dilakukan menggunakan HTML dan CSS tanpa membutuhkan JavaScript tambahan. Dengan atribut data-label dan CSS media query, tabel yang biasanya berbentuk baris dan kolom dapat diubah menjadi tampilan yang lebih mudah dibaca pada layar kecil.

Metode ini cocok digunakan untuk berbagai kebutuhan, seperti tabel daftar produk, harga, data anggota, spesifikasi, jadwal, perbandingan, informasi layanan, maupun data lainnya yang membutuhkan struktur tabel.

Untuk mendapatkan hasil terbaik, pastikan setiap data-label sesuai dengan nama kolom, gunakan struktur HTML yang benar, dan lakukan pengujian pada beberapa ukuran layar sebelum artikel dipublikasikan.

Dengan menerapkan tabel responsif secara tepat, konten Blogger dapat menjadi lebih rapi, mudah dibaca, mobile-friendly, dan nyaman digunakan tanpa harus melakukan perubahan besar pada keseluruhan template.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!