4 Cara Membuat Tabel Responsif di WordPress dengan Mudah

Cara Membuat Tabel Responsif di WordPress - Seotechman.com Tabel adalah elemen penting dalam sebuah website yang berfungsi untuk menyusun dan menampilkan data secara rapi serta mudah dibaca oleh pengguna. Namun, tabel yang tidak responsif dapat menyebabkan tampilan website menjadi kurang optimal, terutama jika diakses melalui perangkat seluler.

Artikel ini akan membahas cara membuat tabel responsif di WordPress, baik menggunakan fitur bawaan Gutenberg, plugin pihak ketiga, maupun dengan kode HTML dan CSS kustom.

Apa Itu Tabel Responsif dan Mengapa Penting?

Pengertian Tabel Responsif

Tabel responsif adalah tabel yang dapat menyesuaikan tampilan berdasarkan ukuran layar perangkat yang digunakan.

Keuntungan Tabel Responsif

Meningkatkan pengalaman pengguna – Pengunjung dapat membaca tabel dengan jelas baik di PC maupun perangkat seluler.
SEO-friendly – Google lebih menyukai website yang mobile-friendly, sehingga tabel responsif bisa meningkatkan peringkat pencarian.
Terlihat lebih profesional – Menampilkan data dalam format yang lebih terstruktur dan rapi.

Cara Membuat Tabel Responsif di WordPress Tanpa Plugin

Jika Anda ingin membuat tabel tanpa plugin tambahan, Anda bisa menggunakan blok bawaan di editor Gutenberg.

1. Menggunakan Blok Tabel di Gutenberg

Masuk ke Dashboard WordPress dan buka halaman atau postingan baru.
Klik Tambah Blok (+) lalu pilih Tabel.
Tentukan jumlah kolom dan baris yang diperlukan, lalu klik Buat Tabel.
Isi data dalam tabel sesuai kebutuhan.

2. Membuat Tabel Responsif dengan CSS

Secara default, tabel di WordPress tidak bersifat responsif. Oleh karena itu, Anda perlu menambahkan kode CSS agar tabel bisa di-scroll secara horizontal pada perangkat seluler.

Langkah-langkah Membuat Tabel Responsif dengan CSS

Tambahkan kode CSS berikut ke dalam Tampilan > Kustomisasi > CSS Tambahan:

css:

.table-responsive {
  overflow-x: auto;
  display: block;
}

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

Bungkus tabel dengan <div class="table-responsive">, seperti contoh di bawah ini:

html:

<div class="table-responsive">
  <table>
    <tr>
      <th>Judul 1</th>
      <th>Judul 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</div>

Dengan cara ini, tabel akan bisa di-scroll ke samping pada layar kecil tanpa merusak tata letak halaman.

Cara Membuat Tabel Responsif di WordPress dengan Plugin

Jika Anda ingin solusi yang lebih praktis dan memiliki fitur tambahan seperti sorting dan pagination, Anda bisa menggunakan plugin pembuat tabel di WordPress.

1. WP Table Builder

WP Table Builder adalah plugin yang memungkinkan Anda membuat tabel dengan fitur drag-and-drop, sehingga lebih mudah dalam pengaturannya.

Cara Menggunakan WP Table Builder

Unduh dan instal WP Table Builder melalui Plugins > Tambah Baru.
Buka WP Table Builder > Add New untuk membuat tabel baru.
Pilih template atau buat tabel dari awal.
Atur tampilan tabel dengan mengubah ukuran kolom, warna, dan teks.
Simpan dan gunakan shortcode untuk menyisipkan tabel ke halaman atau postingan.

2. TablePress

TablePress adalah plugin populer yang memiliki fitur tambahan seperti sorting, pagination, dan filter, menjadikannya pilihan terbaik untuk menampilkan tabel kompleks.

Cara Menggunakan TablePress

Unduh dan instal TablePress melalui Plugins > Tambah Baru.
Buka TablePress > Add New Table untuk membuat tabel baru.
Masukkan data tabel sesuai kebutuhan.
Sesuaikan tampilan tabel dan gunakan shortcode untuk menyisipkan tabel ke halaman atau postingan.

Jika Anda ingin tabel yang bisa di-scroll pada perangkat seluler, aktifkan ekstensi responsif yang tersedia di pengaturan plugin.

Menyesuaikan Tabel dengan CSS Kustom

Jika Anda ingin membuat tabel lebih menarik, Anda bisa menggunakan kode CSS berikut untuk mengubah tampilan tabel di WordPress.

css:

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

.table-custom th, .table-custom td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.table-custom th {
  background-color: #f2f2f2;
}

@media screen and (max-width: 600px) {
  .table-custom, .table-custom thead, .table-custom tbody, .table-custom th, .table-custom td, .table-custom tr {
    display: block;
    width: 100%;
  }

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

  .table-custom td {
    text-align: left;
    padding-left: 50%;
    position: relative;
  }

  .table-custom td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

Kode CSS ini akan membuat tabel menyesuaikan tampilannya agar lebih mudah dibaca di layar kecil.

Kesimpulan

Membuat tabel responsif di WordPress bisa dilakukan dengan beberapa cara, yaitu:

Menggunakan fitur bawaan Gutenberg untuk tabel sederhana.
Menambahkan CSS kustom agar tabel dapat di-scroll pada layar kecil.
Menggunakan plugin seperti WP Table Builder atau TablePress untuk fitur lanjutan seperti sorting dan pagination.

Jika Anda hanya membutuhkan tabel sederhana, blok tabel bawaan di Gutenberg cukup dengan tambahan CSS untuk membuatnya responsif. Namun, jika Anda ingin fitur lebih lengkap, plugin seperti WP Table Builder dan TablePress adalah pilihan terbaik.

Dengan mengikuti panduan ini, Anda dapat membuat tabel yang lebih interaktif, mobile-friendly, dan mudah diakses di semua perangkat. Selamat mencoba! 🚀

Virm Aditya

Berita teknologi informasi terkini