Tutorial Praktis: Membuat Tabel Responsif di WordPress

Mengenal Plugin TablePress

TablePress adalah salah satu plugin WordPress gratis yang berfungsi untuk membuat dan mengelola tabel data di dalam halaman atau postingan tanpa perlu menulis kode HTML. Dengan plugin ini, kamu bisa membuat tabel yang rapi, responsif, serta mudah dibaca — cocok untuk menampilkan daftar harga, perbandingan produk, jadwal, data statistik, maupun tabel informasi lainnya.

TablePress juga memungkinkan pengguna untuk mengimpor dan mengekspor tabel dalam berbagai format seperti Excel (.xls/.xlsx), CSV, HTML, dan JSON, sehingga memudahkan pengelolaan data dalam jumlah besar.

Membuat tabel responsive di WordPress 

Pada panduan ini, kami akan menggunakan plugin TablePress untuk membuat tampilan tabel menjadi responsive. Berikut langkah-langkahnya.

1. Instal Plugin TablePress

TablePress adalah plugin paling populer untuk membuat tabel di WordPress.

Langkah-langkah:

1. Masuk ke Dashboard WordPress.

2. Klik Plugins → Add New (Tambah Plugin).

3. Ketik di kolom pencarian: TablePress.

4. Klik Install Now → Activate.

2. Buat Tabel Baru

Setelah aktif, kamu bisa langsung mulai membuat tabel.

Caranya:

1. Buka menu TablePress → Add New Table.

2. Isi data berikut:

   • Table Name → nama tabel (contoh: Daftar Harga Produk).

   • Description (opsional) → keterangan tabel.

   • Number of Rows & Columns → tentukan jumlah baris dan kolom.

3. Klik Add Table.

3. Masukkan Data ke Dalam Tabel

Setelah tabel dibuat:

• Isi setiap sel dengan teks, angka, atau tautan.

• Kamu bisa menambah atau menghapus baris/kolom sesuai kebutuhan.

• Untuk menebalkan teks atau menambahkan link, gunakan ikon di atas tabel editor.

4. Aktifkan Fitur Responsif (Agar Tampilan Rapi di HP)

Secara default, TablePress belum otomatis responsif. Tapi kamu bisa menambahkan Extension (Add-on) resmi dari TablePress atau pakai kode CSS sederhana.

Opsi 1: Gunakan Extension Resmi (Disarankan)

1. Buka situs resmi TablePress → https://tablepress.org/extensions/responsive-tables/

2. Download file Responsive Tables Extension.

3. Upload ke WordPress lewat menu TablePress → Extensions → Add New.

4. Aktifkan mode responsif dengan memilih “Enable responsive tables” di pengaturan tabel.

Opsi 2: Tambahkan CSS Manual

Jika kamu ingin cara cepat:

1. Masuk ke Appearance → Customize → Additional CSS.

2. Tambahkan kode berikut:

   .tablepress {
width: 100%;
overflow-x: auto;
display: block;
}


3. Klik Publish.

Sekarang tabel kamu bisa scroll horizontal di perangkat kecil seperti HP atau tablet.

5. Masukkan Tabel ke Halaman atau Postingan

Setiap tabel punya shortcode unik, misalnya:

Caranya:

1. Salin shortcode dari daftar tabel di TablePress → All Tables.

2. Tempelkan ke halaman atau postingan di mana kamu ingin menampilkan tabel.

3. Klik Update / Publish.

6. Kustomisasi Tampilan (Opsional)

Kamu bisa menambahkan:

• Header dan footer berbeda warna.

• Penyortiran dan pencarian otomatis (aktifkan “Use DataTables features”).

• Pagination (halaman tabel) untuk data yang banyak.

• Highlight baris saat hover.

7. Uji Tabel di Perangkat Mobile

Terakhir, buka halaman yang berisi tabel di HP atau tablet.
Pastikan:

• Tabel bisa digeser horizontal.

• Teks tidak pecah.

• Tampilan tetap rapi dan mudah dibaca.