Cara Membuat Tabel Responsif di WordPress
Diterbitkan: 2023-02-12Tabel adalah elemen desain situs web yang dapat membantu Anda menampilkan informasi dalam jumlah besar secara elegan dengan cara yang teratur. Mereka bekerja cukup baik pada tampilan komputer tradisional, tetapi seringkali dapat menciptakan pengalaman yang tidak diinginkan pada perangkat seluler.
Untungnya, ada beberapa solusi yang bisa diterapkan untuk membuat tabel yang lebih responsif. Menggunakan praktik desain responsif ini dapat meningkatkan Pengalaman Pengguna (UX) situs Anda. Ini berarti pengunjung akan dapat melihat dan mengakses data di tabel Anda dengan lebih mudah, apa pun jenis perangkat yang mereka gunakan.
Pada artikel ini, kita akan melihat apa artinya membuat tabel menjadi responsif. Kami kemudian akan membahas dua cara untuk membuat tabel responsif di WordPress. Mari selami!
Apa itu Tabel Responsif?
Biasanya, tujuan tabel adalah menampilkan banyak data dengan cara yang masuk akal. Namun, saat Anda mencoba melihat tabel di perangkat seluler, semuanya bisa serba salah. Hal ini terjadi karena baris tabel seringkali berupa banyak kolom yang lebih lebar daripada yang dapat ditangani oleh tampilan layar Anda.
Saat Anda membuat tabel responsif, pada dasarnya Anda membuat sekumpulan aturan untuk tabel data asli Anda. Aturan ini dapat menentukan breakpoint berdasarkan ukuran tampilan. Artinya, jika pengguna mengakses tabel di perangkat yang lebih kecil dari titik henti sementara yang Anda tetapkan, tata letak tabel akan merespons dengan memformat ulang agar sesuai dengan ukuran layar.
Tabel responsif biasanya dapat diformat ulang dengan menambahkan bilah gulir atau menumpuk informasi. Anda tidak ingin mengecilkan dan menjejalkan informasi dalam sel bersamaan saat ukuran layar berubah, karena ini dapat membuat tabel tidak terbaca. Untungnya, desain responsif tidak terlalu sulit untuk dicapai.
Cara Membuat Tabel Responsif (Tanpa Plugin)
Pada dasarnya ada dua pendekatan untuk membuat tabel responsif di WordPress. Pertama, kita akan melihat cara menyelesaikan pekerjaan tanpa plugin.
Ini akan membutuhkan beberapa pengetahuan pengkodean: khususnya, pemahaman tentang Cascading Style Sheets (CSS). Kami juga merekomendasikan bekerja di lingkungan pementasan atau pengembangan daripada di situs web langsung Anda, hingga Anda merancang tabel yang berfungsi dengan baik.
Langkah 1: Format Tabel Anda untuk Responsif CSS
Dalam contoh ini, kami akan memberi tahu data tabel sampel kami untuk memformat ulang pada breakpoint tertentu. Anda cukup menambahkan bilah gulir ke tabel dalam beberapa kasus, tetapi kami akan benar-benar mengelompokkan data tabel sehingga muncul dalam format yang lebih mudah dibaca yang menghilangkan kebutuhan untuk pengguliran horizontal.
Ini adalah pendekatan yang bagus, karena pengguliran horizontal sering kali berarti Anda melihat data kolom di luar konteks:
Untuk membuat tabel ini berfungsi lebih baik, pertama-tama Anda harus memastikan bahwa tabel Anda telah diformat dengan benar. Jika Anda membuat tabel menggunakan Editor Blok, Anda dapat melakukannya secara normal lalu menambahkan atribut <thead> dan <tbody> untuk memastikan CSS Anda berfungsi dengan baik:
Setelah menambahkan tabel, Anda dapat menggunakan editor HTML untuk menyesuaikan pemformatannya. Atribut <thead></thead> Anda harus menggabungkan semua header kolom Anda. Demikian pula, Anda akan menggabungkan semua data tabel berikutnya dalam atribut <tbody></tbody>.
Setelah Anda menambahkan tag CSS di langkah berikutnya, lembar gaya Anda akan dapat memahami apa yang seharusnya ditampilkan sebagai tajuk untuk setiap kolom dalam tabel, dan apa isi isi atau selnya.
Langkah 2: Tambahkan Tag Khusus ke CSS Anda
Selanjutnya, kita akan menggunakan potongan kode CSS khusus dan tema WordPress Twenty Nineteen. Tema ini memiliki desain yang cukup responsif sebagai bagian dari kode aslinya, tetapi penyesuaian CSS kami akan membuatnya lebih jauh.
Karena semua tema berbeda, Anda pasti ingin memahami struktur tema Anda secara menyeluruh agar berhasil menerapkan desain tabel yang responsif. Beberapa tema mungkin memerlukan pustaka JavaScript tambahan.
Sebagai contoh, kita akan membuka Appearance > Customize > Additional CSS , tempat kita dapat menambahkan kode CSS khusus berikut:
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Setelah Anda menempelkan kode Anda sendiri ke dalam editor, Anda harus memilih Terbitkan agar perubahan Anda berlaku.
Langkah 3: Uji Ketanggapan Tabel di WordPress
WordPress memiliki fitur pengujian layar bawaan yang berguna yang memungkinkan Anda menguji konten Anda pada tiga ukuran layar yang berbeda. Di bagian bawah layar tempat Anda menambahkan CSS khusus, Anda dapat mengeklik ikon tablet atau ponsel untuk menguji gaya baru tabel Anda:
Untuk contoh ini, kami telah membuat tabel sederhana yang berisi semua atribut HTML yang diperlukan untuk bekerja dengan CSS kami. Breakpoint kami di CSS diatur ke 600px, tapi itu bisa diubah agar sesuai dengan kebutuhan Anda.
Alih-alih menambahkan scrollbar atau memampatkan data tabel, CSS yang kami tambahkan mengatur ulang data menjadi format yang ramah seluler. Ini memungkinkan pengguna di perangkat seluler untuk menggulir secara vertikal, dan melihat data tabel dalam konteks dengan sel terkait lainnya.
Cara Membuat Tabel Responsif Dengan Plugin
Jika Anda merasa tidak nyaman menyesuaikan kode atau CSS tema, ada opsi lain. Ada sejumlah plugin WordPress yang tersedia yang dapat membantu Anda membuat desain tabel yang responsif untuk situs web Anda.
Langkah 1: Unduh Plugin
Untuk memulai, Anda harus memilih plugin. Karena ada beberapa opsi untuk mendesain tabel responsif, kami akan menyoroti beberapa untuk Anda mulai:
- Tabel Ninja : Dilabeli sebagai plugin nomor satu WordPress untuk membuat tabel responsif, ia hadir dengan lebih dari 100 gaya tabel untuk dipilih.
- wpDataTables : Ini adalah plugin gratis dengan versi premium, tetapi versi lite dikemas dengan fitur untuk membuat tabel dan bagan yang kaya dan interaktif.
- Tabel Responsif WP : Ini adalah plugin sederhana dan gratis yang memudahkan pembuatan tabel responsif yang menggulir secara horizontal di layar kecil.
Untuk sisa contoh ini, kami akan menggunakan Tabel Ninja untuk mendemonstrasikan cara membuat tabel data responsif di WordPress.
Langkah 2: Masukkan Data Anda
Setelah menginstal dan mengaktifkan plugin, Anda dapat langsung membuat tabel. Anda dapat menavigasi ke NinjaTables > All Tables > Add Table :
Di sini Anda dapat menambahkan tabel baru dari awal, atau Anda dapat Mengimpor Tabel dari file. Kami akan membuat tabel dari awal dengan opsi Tambahkan Tabel . Anda kemudian harus memasukkan judul dan deskripsi untuk tabel Anda:
Anda juga akan memiliki beberapa opsi lain di sini. Misalnya, jika Anda menyiapkan toko WooCommerce, Anda dapat menggunakan informasi tersebut untuk membuat tabel WooCommerce.
Setelah Anda menambahkan informasi Anda, Anda akan mengklik Tambah untuk membuat tabel. Anda kemudian harus mulai memasukkan data. Anda dapat memilih Tambahkan Kolom untuk menyiapkan struktur tabel Anda:
Anda akan memiliki beberapa bidang yang harus diselesaikan untuk membuat kolom Anda. Ini termasuk nama tajuk kolom dan jenis data yang dikandungnya. Anda juga dapat menyetel Titik Henti Responsifnya:
Untuk memilih dari sejumlah opsi yang menentukan bagaimana tabel Anda akan merespons perangkat yang berbeda, Anda dapat mengakses menu dengan mengeklik Selalu tampilkan di semua perangkat :
Setelah Anda membuat kolom, pilih Add Data , dan NinjaTables akan memberikan formulir yang mudah bagi Anda untuk menambahkan beberapa entri ke dalam tabel dengan cepat:
Anda dapat membiarkan opsi Lanjutkan Menambahkan dicentang jika Anda memiliki banyak entri untuk dibuat. Setelah selesai, Anda dapat menutup jendela dan kembali ke layar pengeditan tabel.
Langkah 3: Format Tabel Anda
Sekarang setelah Anda memiliki tabel dengan informasi di dalamnya, Anda dapat menjelajahi pengaturan dan opsi gaya NinjaTable. Dari dalam jendela pengeditan tabel, Anda dapat mengakses lebih banyak pengaturan di sepanjang tab atas, dan juga di sisi kanan layar:
Anda akan memiliki banyak opsi untuk menyesuaikan gaya dan tampilan tabel, termasuk mengganti warna baris tabel, memusatkan teks, menyembunyikan data, dan lainnya.
Langkah 4: Uji Tabel Anda
NinjaTable memudahkan untuk menguji daya tanggap tabel Anda saat Anda sedang mengeditnya. Di tab Desain Tabel , Anda akan menemukan tiga opsi untuk menguji respons layar:
Anda dapat memilih Desktop , Tablet , atau Seluler untuk melihat tampilan tabel Anda pada jenis perangkat tersebut.
Setiap tabel yang Anda buat juga dilengkapi dengan kode pendek. Plus, Anda dapat dengan mudah menambahkan tabel Anda ke konten situs web Anda dengan menggunakan blok NinjaTable yang akan Anda temukan di bagian Pemformatan menu Editor Blok.
Biarkan WP Engine Membantu Anda Menjaga Situs Anda Responsif
Membuat situs web yang menggunakan desain responsif yang solid tidak harus menjadi tantangan jika Anda memiliki akses ke sumber daya yang tepat.
Di sini, di WP Engine, kami ingin Anda dapat memberikan pengalaman digital terbaik kepada pelanggan Anda. Lihat banyak paket hosting WordPress dan solusi pengembang kami untuk proyek Anda selanjutnya!