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
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 →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.
Warta Pilihan Redaksi:
BERNAS Growth Academy: Belajar Investasi & Web3 dari Nol- 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
📊 Survei Kilat BERNAS
Apakah Anda tertarik kuliah lagi?
Jawaban Anda membantu kami menyajikan konten yang lebih relevan.
Akselerasi Pertumbuhan Finansial
Dukung Ekosistem Literasi & Dapatkan B-Points Rewards
Sebarkan Insight Ini
Gunakan link personal Anda untuk mengundang analis lain dan dapatkan poin eksosistem secara otomatis.
Kutip Sebagai Sumber
Format sitasi siap pakai untuk laporan profesional, skripsi, atau publikasi media lainnya.
Track Top 100 Kompetitor & Industry Trend Real-Time
Bernas Intelligence memberikan sinyal pasar, ranking brand, dan content brief mingguan untuk tim marketing & strategy Anda.
Lihat Intelligence Hub →
Program Career Accelerator UNMAHA
Akselerasi karir global Anda lewat program Teaching Factory. Kuliah S1/D3 dengan jaminan penempatan kerja.
Warta Terkait NASIONAL
Local Intelligence Node
Tren Kerja Remote Menurun, Perusahaan Teknologi di Indonesia Kembali Wajibkan WFO Mulai April 2026
Kebangkitan Kuliner Lokal 2026: Strategi Digital UMKM Yogyakarta Tembus Pasar Nasional Melalui Optimasi Rantai Pasok
Festival Budaya Nusantara 2026 Targetkan 1 Juta Kunjungan Wisatawan Digital Melalui Metaverse
Ingin Terus Mengikuti Tren Finansial di NASIONAL?
Dapatkan akses eksklusif ke direktori berita bisnis dan ekonomi dari 500+ kota di seluruh nusantara.
Populer di teknologi
Semantic Authority Linker
Lanjutkan Literasi Strategis Anda