Rumahweb Journal
Banner - Cara Membuat Tabel Responsive di WordPress

Cara Membuat Tabel Responsive di WordPress

Seringkali, fitur tabel di Gutenberg WordPress menghasilkan tampilan yang tidak responsive dan cenderung kurang menarik. Karenanya pada panduan ini, kami akan berbagi cara membuat tabel responsive di WordPress dengan bantuan plugin TablePress.

Terkadang kita perlu menambahkan tabel pada website untuk menginformasikan data penting kepada pengunjung. Pada WordPress, kita dimudahkan dalam pembuatan tabel yang disediakan oleh editor Gutenberg.

Namun perlu diketahui, pembuatan tabel dengan Gutenberg memiliki fitur yang sangat terbatas. Hal ini menyebabkan pengguna tidak bisa banyak melakukan kustomisasi seperti menentukan ukuran, memasukkan link dan gambar. Juga tidak semua plugin mendukung tampilan responsive, sehingga ketika dibuka pada perangkat seperti mobile atau tablet menjadi acak-acakan.

Pada panduan ini, kami akan menjelaskan salah satu plugin untuk memudahkan pembuatan tabel responsive yaitu TablePress. Simak panduan berikut ini.

Mengenal Plugin TablePress

TablePress adalah salah satu plugin tabel WordPress yang paling populer. Plugin ini memudahkan dalam membuat dan mengelola tabel yang menarik pada website, dengan tampilan tabel yang telah responsive.

Berikut detail fitur yang disediakan di Plugin TablePress :

  • Menambah, edit, dan kelola tabel kecil atau besar dengan mudah
  • Menambahkan penyortiran langsung, paginasi, pencarian, dan fitur lainnya untuk pengunjung website
  • Sisipkan gambar, tautan, dan rumus matematika
  • Impor file spreadsheet yang ada
  • Tidak perlu pengetahuan coding

Dari banyaknya fitur yang ditawarkan, plugin ini termasuk plugin yang recommended untuk dipakai.

Membuat tabel responsive di WordPress

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

Step 1. Instalasi Plugin TablePress

Berikut langkah-langkah instalasi plugin TablePress melalui dashboard.

  1. Pada dashboard wp-admin, klik menu Plugins > Add New.
  2. Pada kotak pencarian ketikkan tablepress.
  3. Klik Install Now seperti pada gambar berikut.
instalasi tablepress pada wordpress - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Setelah selesai proses install, klik Activate.
activate plugin tablepress - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress

Step 2. Cara Membuat Tabel

Setelah plugin terinstal, lanjutkan pembuatan tabel dengan mengikuti langkah berikut :

  1. Pilih menu TablePress > Add New Table.
add new table - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Isikan nama tabel, deskripsi, dan jumlah baris serta kolom.
  2. Lanjutkan klik Add table.
isi informasi tabel - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Masukkan data yang ingin ditampilkan ke dalam tabel pada kolom Table Content.
isi tabel pada table content - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress

Pada halaman yang sama terdapat Table Manipulation yang dapat digunakan untuk mengatur tampilan tabel.

Pengaturan yang dapat dilakukan seperti duplikat baris/kolom, memindahkan baris/kolom, menambah baris/kolom, sembunyikan baris/kolom, memasukkan link, gambar, dan lainnya.

Table Manipulation - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress

Step 3. Memasukkan Gambar pada Tabel

TablePress memungkinkan penggunanya dapat menyisipkan gambar pada tabel yang dibuat, simak langkah berikut :

  1. Klik pada kolom yang akan diinsert gambar.
  2. Lalu klik kanan pilih insert image.
Insert image - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Klik Select file.
Insert image - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Pilih gambar yang akan digunakan lalu klik Open.
  2. Lalu klik insert into tables.
Insert image - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Lanjutkan seting ukuran gambar yang diinginkan.
Insert image - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Klik preview untuk melihat tampilan dari tabel yang dibuat.
Preview  - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Setelah selesai membuat tabel, klik Save Changes.
Save changes - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress

Memasukkan Tabel pada Post

Selesai membuat tabel, masukkan tabel tersebut ke postingan dengan mengikuti langkah berikut :

  1. Masuk ke halaman edit post.
  2. Add block baru pilih TablePress table.
insert table press pada post - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Klik tombol Settings dikanan atas > lalu pilih tabel yang diinginkan.
insert table press pada post - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
  1. Insert TablePress pada post telah selesai, lanjutkan publish/update post yang telah dibuat.

Berikut adalah tampilan tabel yang telah berhasil dibuat.

tampilan desktop - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress
Tampilan mobile - Cara Membuat Tabel Responsive di WordPress dengan Plugins TablePress

Demikian cara membuat tabel responsive di WordPress, selamat mencoba!

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 1

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Cloud Hosting Terbaik Rumahweb

Wahyu Januari

satu dari bagian tim Teknis Rumahweb yang bisa membantu Kamu ! Salam kenal <3