Cara Membuat Tabel Responsif di WordPress dengan Mudah

BERNAS – Membuat tabel responsif di WordPress sangat penting agar konten yang kamu tampilkan tetap rapi dan mudah dibaca di berbagai perangkat, termasuk ponsel dan tablet.

Tanpa desain yang responsif, tabel bisa terlihat berantakan dan sulit dipahami, terutama pada layar kecil.

Untungnya, ada beberapa cara mudah untuk membuat tabel responsif di WordPress, baik menggunakan plugin maupun tanpa plugin.

Dalam artikel ini, kamu akan mempelajari langkah-langkah praktis untuk membuat tabel responsif di WordPress.

Dengan mengikuti panduan ini, kamu dapat meningkatkan pengalaman pengunjung situs kamu dan memastikan konten tetap menarik di semua perangkat.

Cara Membuat Tabel Responsif di WordPress

1.

🎓 UNMAHA × BERNAS

Kuliah GRATIS via Teaching Factory — Bayar Setelah Kerja!

Program S1/D3 di UNMAHA dengan Income Sharing Agreement. Tanpa biaya kuliah, bayar 15% dari gaji setelah bekerja.

Daftar Sekarang — Gratis →

Menggunakan Plugin TablePress untuk Membuat Tabel Responsif

TablePress adalah plugin WordPress populer yang memungkinkan kamu membuat dan mengelola tabel dengan mudah tanpa perlu menulis kode.

Plugin ini menyediakan antarmuka pengguna yang ramah dan mendukung fitur responsif, sehingga tabel yang kamu buat akan otomatis menyesuaikan dengan ukuran layar perangkat pengunjung.

Langkah-langkah Menggunakan TablePress

• Instalasi Plugin TablePress

Masuk ke dashboard WordPress kamu, pilih menu Plugins > Add New, kemudian cari “TablePress” dan klik Install Now.

Setelah proses instalasi selesai, klik Activate untuk mengaktifkan plugin.

• Membuat Tabel Baru

Setelah plugin diaktifkan, kamu akan melihat menu TablePress di dashboard.

Klik menu tersebut, lalu pilih Add New Table.

Tentukan jumlah baris dan kolom yang diinginkan, kemudian klik Add Table.

• Menambahkan Konten ke Tabel

Pada halaman pengeditan tabel, kamu dapat memasukkan data ke dalam sel-sel tabel.

Kamu juga dapat menambahkan gambar, tautan, dan menggunakan rumus matematika jika diperlukan.

• Menampilkan Tabel di Halaman atau Postingan

Setelah tabel selesai dibuat, kamu dapat menampilkannya di halaman atau postingan dengan menyalin shortcode yang disediakan oleh TablePress dan menempelkannya di tempat yang diinginkan.

Dengan menggunakan TablePress, kamu dapat membuat tabel responsif yang menarik dan mudah dikelola tanpa memerlukan keterampilan teknis.

2.

Membuat Tabel Responsif Tanpa Menggunakan Plugin

Jika kamu ingin membuat tabel responsif tanpa menambahkan plugin, kamu dapat melakukannya dengan menambahkan kode CSS khusus ke tema WordPress kamu.

Metode ini cocok jika kamu hanya perlu membuat beberapa tabel responsif dan ingin menghindari penggunaan plugin tambahan.

Langkah-langkah Membuat Tabel Responsif dengan CSS

• Menambahkan Kode CSS ke Tema
• Masuk ke dashboard WordPress, pilih menu Appearance > Customize, kemudian pilih Additional CSS.

  Tambahkan kode berikut:

• css
• Salin
• Edit
• @media only screen and (max-width: 706px) {table {display: block;overflow-x: auto;white-space: nowrap;}}
• Kode ini akan membuat tabel menjadi dapat digulir secara horizontal pada perangkat dengan lebar layar kurang dari 706px.
• Menambahkan Kelas Responsif ke Tabel

Jika kamu ingin menerapkan gaya responsif hanya pada tabel tertentu, tambahkan kelas responsive ke elemen tabel.

Misalnya:

• html
• Salin
• Edit
• <table class=”responsive”>
• <!– Konten tabel –>
• </table>

Kemudian, tambahkan kode CSS berikut:

• css
• Salin
• Edit
• @media only screen and (max-width: 706px) { responsive {display: block;overflow-x:auto;white-space: nowrap; }}

Dengan cara ini, hanya tabel yang memiliki kelas responsive yang akan mendapatkan gaya responsif.

Metode ini memungkinkan kamu membuat tabel responsif tanpa menginstal plugin tambahan, cocok untuk situs dengan kebutuhan tabel yang sederhana.

3.

Tips Membuat Tabel Responsif yang Efektif

• Gunakan Judul Kolom yang Jelas: Pastikan setiap kolom memiliki judul yang deskriptif agar pengunjung dapat memahami isi tabel dengan mudah.
• Batasi Jumlah Kolom: Terlalu banyak kolom dapat membuat tabel sulit dibaca di perangkat kecil.

  Pertimbangkan untuk membagi informasi menjadi beberapa tabel jika diperlukan.

• Gunakan Warna untuk Membedakan Baris: Memberikan warna latar belakang yang berbeda pada baris ganjil dan genap dapat membantu pengunjung membedakan antar baris dengan lebih mudah.
• Uji Tampilan di Berbagai Perangkat: Selalu periksa tampilan tabel di berbagai perangkat untuk memastikan keterbacaan dan fungsionalitasnya.

Dengan mengikuti tips ini, kamu dapat membuat tabel responsif yang tidak hanya fungsional tetapi juga menarik secara visual.

Baca Juga: Cara Membuat Form Register di WordPress, Mudah dan Cepat

Membuat tabel responsif di WordPress sangat penting untuk memastikan konten situs kamu tetap rapi dan mudah dibaca di berbagai perangkat.

Dengan menggunakan plugin seperti TablePress atau menambahkan kode CSS khusus, kamu dapat membuat tabel yang menyesuaikan dengan ukuran layar pengunjung.

Penting untuk selalu mempertimbangkan desain dan fungsionalitas tabel agar pengalaman pengguna tetap optimal.

Jika kamu tertarik untuk mengembangkan keterampilan digital marketing dan ingin melanjutkan studi di bidang tersebut, pertimbangkan untuk mendaftar di Universitas Mahakarya Asia (UNMAHA).

UNMAHA menawarkan program studi Informatika yang relevan dan beasiswa PBL untuk mahasiswa baru.

Untuk informasi lebih lanjut dan pendaftaran, kunjungi situs resmi di PMB UNMAHA.

Dan ikuti sertifikasi digital marketing yang disediakan oleh UNMAHA untuk menambah skill kamu dan untuk kamu yang ingin belajar lebih lanjut tentang coaching dan mentoring?

Kunjungi PT Adolo Coaching Mentoring untuk mendapatkan bimbingan yang tepat dalam perjalanan karier kamu.

Untuk informasi dan pertanyaan lebih lanjut bisa menghubungi WhatsApp di Universitas Mahakarya Asia.***

Editor: Mahfida Ustadhatul Umma