Cara Membuat Tabel HTML Tingkat Lanjut Di WordPress Tanpa Coding

Diterbitkan: 2021-12-11

WordPress tetap menjadi platform CMS paling populer di dunia dengan pangsa 43% dari seluruh web. Meskipun tidak diragukan lagi salah satu fitur yang paling menarik, WordPress belum tentu merupakan platform terbaik dalam hal membuat tabel HTML tanpa pengkodean.

Meskipun banyak orang berpikir tabel HTML sudah usang, mereka masih menawarkan nilai yang sangat baik kepada audiens. Akibatnya, sebagian besar pengguna harus menyewa ahli untuk tugas "khusus pengembang" tertentu. Mempertimbangkan tujuannya, itu adalah kekecewaan besar bagi pengguna WordPress saat itu.

Gutenberg: Editor default WordPress dengan blok tabel

Selama WordCamp Eropa yang diadakan pada Juli 2017, pendiri WordPress Matt Mullenweg mengumumkan bahwa editor blok Gutenberg adalah editor masa depan untuk WordPress. Untuk menyenangkan banyak pengguna WordPress, editor baru berjanji untuk menyertakan blok tabel bawaan.

Namun, ketika Gutenberg masuk dengan WordPress 5.0, editor dikritik karena menyebabkan masalah responsif dan pengoptimalan pada perangkat yang berbeda. Meskipun demikian, editor memang datang dengan blok tabel bawaan seperti yang dijanjikan, memungkinkan pengguna membuat tabel di situs web mereka tanpa harus membuat kode.

Meskipun blok tabel Gutenberg adalah pilihan yang cukup berguna untuk membuat tabel HTML di WordPress, itu jauh di belakang menjadi solusi pembuat tabel yang efektif. Itu tidak akan menawarkan tampilan yang paling menarik, tidak dapat digunakan kembali, dan tidak pandai menangani database besar.

Gutenberg tidak lain adalah pembuat tabel biasa. Anda tidak dapat menggunakan Gutenberg untuk fungsionalitas tabel HTML tingkat lanjut seperti pengurutan tabel, pemfilteran, atau penataan gaya. Secara keseluruhan, editor blok Gutenberg jauh dari menjadi semacam pembuat tabel tingkat lanjut.

Oleh karena itu, terserah kepada pengembang WordPress jelajah bebas seperti kami, WPManageNinja, untuk membuat plugin yang menambahkan fitur tabel canggih ke dasbor Anda.

Tabel Ninja: plugin WordPress tabel HTML tingkat lanjut

Bahkan sebelum Gutenberg diumumkan, pengembang kami di WPManageNinja bekerja tanpa henti untuk menghasilkan plugin tabel WordPress yang andal yang memungkinkan pengguna membuat tabel tanpa kerumitan.

Pada 27 Februari 2018, kami merilis tabel Ninja di toko plugin WordPress, dan hanya butuh beberapa bulan bagi Tab Ninja untuk mencapai lebih dari 30.000 instalasi aktif! Dukungan dan apresiasi yang luar biasa dari pengguna kami juga memotivasi kami untuk merilis lebih dari 45 pembaruan plugin dalam waktu kurang dari 2,5 tahun sejak rilis pertama, menjadikan Ninja Tables sebagai plugin tabel WordPress nomor satu dalam proses itu!

Berkat fitur dinamis dan antarmuka yang ramah pengguna, Ninja Tables sekarang digunakan oleh lebih dari 70 ribu situs web dan bisnis.

Ninja Tables adalah plugin visualisasi data yang memungkinkan Anda membuat berbagai tabel untuk ditampilkan di situs web Anda. Ketanggapan, fitur, fasilitas penyesuaian, dan integrasi pihak ketiga menjadikannya pilihan terbaik Anda dalam hal mengambil tabel HTML canggih yang sulit ditarik ke situs WordPress Anda.

Dapatkan Meja Ninja GRATIS

Sekarang, mari gali fitur pembuatan tabel HTML dan penyesuaian tercanggih dari Ninja Tables.

  • UI
  • Editor tabel
  • Integrasi

UI

Setelah aktivasi, Tabel Ninja dapat ditemukan dari bilah sisi dasbor WordPress Anda. Seperti kebanyakan plugin WordPress, Ninja Table menawarkan UI dengan beberapa fungsi. Mari kita pelajari lebih lanjut!

  • Semua tab
  • Alat dan pengaturan
  • Bantuan dan dokumentasi

Beranda/Semua Tabel

Ninja Tables Home memiliki antarmuka yang menarik dengan penawaran baru. Ini memberi Anda dua tombol, satu untuk membuat dan satu untuk mengimpor.

Gunakan Tabel Ninja

Tombol Buat Tabel Pertama Anda membawa Anda ke pembuat tabel WordPress manual, sedangkan Anda juga dapat Mengimpor Dari CSV.

Jika Anda memutuskan untuk membuat tabel dari awal, Anda akan diminta untuk memberikan Judul dan Deskripsi di jendela pop-up. Anda mungkin juga melihat beberapa tab lain, yang menawarkan berbagai fitur impor dan integrasi. Namun, Ninja Tables versi gratis hanya akan memungkinkan Anda untuk Mengimpor melalui CSV atau JSON dan berintegrasi dengan WP Fluent Forms.

Cara membuat tabel dengan plugin

Setelah Anda memberikan Judul dan Deskripsi , klik tombol Tambah untuk mengakses pembuat tabel. Jika Anda tidak membutuhkannya, Anda dapat melewati kotak deskripsi.

Fitur impor juga bekerja dengan cara yang sama. Ini memungkinkan Anda memilih file excel atau file CSV lain yang telah Anda buat di komputer untuk diunggah ke situs web Anda.

Either way, Anda akan berakhir di editor tabel. Perhatikan bahwa Tabel Buatan Anda dapat digunakan kembali dan akan muncul di jendela beranda. Tabel Ninja mengidentifikasi tabel menggunakan kode pendek. Untuk menggunakan tabel di postingan atau halaman situs web Anda, Anda hanya perlu menyalin-tempel kode pendek tabel di halaman atau postingan Anda.

Alat dan Pengaturan

Selain tab Beranda , Tabel Ninja juga menyertakan tab Alat dan Pengaturan yang memungkinkan pengguna untuk Mengimpor, mengubah Tampilan Global , mengatur Izin pengguna, dan mengubah Pengaturan Global.

impor tabel wordpress

Alat Impor cocok jika Anda sudah menggunakan plugin tabel populer lainnya dan telah beralih ke Tabel Ninja. Ninja Table memiliki fitur impor tabel sekali klik untuk TablePress, Ultimate Tables, dan Data Tables Generator oleh Supsystic. Anda juga dapat mengimpor file CSV dalam tab ini.

Selanjutnya, tab Tampilan Global memungkinkan Anda untuk mengubah gaya tabel. Tabel Ninja dapat mengimprovisasi tabel Anda menggunakan tiga gaya UI tabel yang berbeda. Anda juga dapat menyesuaikan setiap gaya sesuai dengan preferensi Anda dan memilih apakah akan mengizinkan pengunjung untuk mencari dan memfilter tabel Anda. Namun, aturan penampilan juga dapat dimodifikasi untuk setiap tabel secara terpisah.

Sayangnya, Anda tidak dapat mengatur Izin untuk pengguna backend yang berbeda kecuali Anda memiliki versi pro Tabel Ninja. Tab yang tersisa memungkinkan Anda memilih bagaimana Javascript Errors akan ditangani dan untuk Clear Table Cache .

Bantuan dan Dokumentasi

Beragam fitur Ninja Tables menuntut dokumentasi yang andal, dan tim kami telah menyiapkan semua yang perlu Anda ketahui tentang Ninja Tables.

Dokumentasi Ninja Tables

Antarmuka Bantuan dan Dokumentasi kami menawarkan Panduan Pengguna yang terdokumentasi dengan baik untuk pemahaman mendalam tentang apa yang dapat dilakukan Ninja Tables. Dan jika Anda masih menghadapi masalah, Anda selalu dapat Menghubungi Kami dengan mengirimkan tiket dukungan!

Sekarang setelah Anda mempelajari tentang UI, Anda pasti ingin membuat tabel! Jadi, kembalilah ke Beranda dan mulailah membuatnya!

Editor Meja

Editor tabel adalah salah satu hal paling menarik tentang Ninja Tables. Ini ditingkatkan dengan beberapa fitur pembuat tabel HTML paling canggih serta penyesuaian. Setelah mengklik tombol Tambah atau Impor, Anda akan dibawa ke editor tabel Tabel Ninja yang lengkap.

fitur tabel wordpress

UI pembuat tabel Ninja Tables terdiri dari bagian yang ditampilkan di atas. Setiap bagian pembuat tabel memiliki beberapa fungsi penyesuaian untuk membuat dan mendesain tabel HTML WordPress yang indah.

Anda dapat mengubah judul dan deskripsi tabel dan mengatur Keterangan Tabel dengan mengklik tombol Edit di bagian atas. Selain itu, UI pembuat tabel Ninja Tables juga memungkinkan Anda Pratinjau tabel kapan pun Anda mau.

  • Baris tabel
  • Konfigurasi
  • Desain
  • Pengeditan bagian depan
  • CSS khusus
  • Ekspor Impor

Mari kita bahas fungsi table builder satu per satu.

Baris Tabel

Baris Tabel adalah salah satu aspek mendasar dari setiap pembuat tabel HTML di WordPress. Seperti yang dikatakan, Anda dapat memulai dengan mengklik tombol Tambahkan Kolom !

tabel wordpress pemformatan bersyarat

Tombol akan membuka jendela pembuatan kolom yang memberikan beberapa fungsi tabel HTML paling canggih di WordPress. Ninja Tables bukan hanya pembuat tabel dasar dengan fasilitas pembuatan kolom rata-rata; itu jauh lebih dari itu.

Jadi, sementara Anda dapat menulis judul kolom, Anda juga dapat mengatur Tipe Data dan Breakpoint Responsif (Breakpoint Responsif memungkinkan Anda memilih apakah akan menampilkan kolom pada perangkat tertentu) .

Namun, versi gratis membatasi bidang Pilih, gambar, dan unggahan file dan tidak memungkinkan Anda membuat tombol. Namun, plugin ditingkatkan dengan beberapa fitur tambahan data yang luar biasa seperti Bidang HTML , Nilai Numerik, dan Bidang Tanggal .

Dan jika Anda masih mencari kontrol lebih besar atas kolom tabel Anda, Anda dapat membuka Pengaturan Lanjutan , Pengaturan Bersyarat , dan Nilai Transformasi yang tersedia di tab penyesuaian kolom lainnya. Lihat dokumentasi Ninja Tables untuk informasi lebih lanjut tentang cara kerjanya.

Setelah Anda menambahkan kolom tabel, tombol Tambah Data akan muncul di editor. Ini memungkinkan Anda untuk menambahkan data ke situs web Anda dengan mudah. Anda dapat menyesuaikan kolom secara terpisah dengan mengeklik ikon roda gigi di samping tajuk kolom dan mengedit, menggandakan, atau menghapus data kapan saja!

Penyortiran manual Ninja Tables

Terakhir, bagian baris tabel juga memungkinkan Anda membuat Tindakan Massal atau mengatur Tampilan Ringkas jika tabel Anda terdiri dari banyak data.

Konfigurasi Tabel

Tab Konfigurasi Tabel menawarkan organisasi kolom drag-and-drop. Umumnya, tabel HTML tidak dapat diatur di WordPress setelah dibuat.

Desain tabel WordPress

Dalam hal itu, Tabel Ninja tidak membatasi organisasi tabel. Baris tabel dapat diatur dengan menyeret dan menjatuhkan, sementara Anda juga dapat membuat kolom baru atau mengedit yang sudah ada.

Tab berikutnya pada tab konfigurasi tabel memungkinkan Anda memilih Rendering Settings , yaitu, bagaimana Anda ingin tabel dirender oleh browser. Secara default, tabel Anda akan dirender dengan pengaturan Tabel Ajax . Fitur ini memungkinkan Anda untuk menggabungkan database besar tanpa merusak kecepatan situs web Anda.

Meskipun ada dua opsi rendering, Anda tidak dapat memilih pengaturan Tabel Lanjutan kecuali Anda memiliki versi pro. Tabel Tingkat Lanjut dapat menggabungkan beberapa bidang tabel paling canggih, termasuk margin sel dan kode pendek, dan cocok untuk pengoptimalan SEO.

Filter Kustom adalah fungsi yang berguna jika Anda ingin menyertakan Tombol Radio, Kotak Centang, pemilih Tanggal, atau berbagai UI khusus lainnya ke dalam tabel Anda. Ini dapat memberikan fitur pengoptimalan konversi yang sangat baik jika Anda menampilkan produk atau menambahkan lebih banyak data dalam sel tabel Anda. Namun, filter khusus juga merupakan fitur pro.

Konfigurasi tombol memungkinkan Anda menyertakan tombol impor Cetak atau CSV (fitur Pro). Pengaturan Bahasa berguna jika Anda tertarik menggunakan bahasa yang berbeda untuk bilah pencarian tabel, placeholder pencarian, atau judul dropdown pencarian.

Desain Meja

Desain Tabel Ninja Tables adalah penyesuai visual yang luar biasa. Ini memiliki tiga Perpustakaan Gaya dengan hingga sembilan fungsi penyesuaian gaya, memberi Anda kontrol visual maksimum atas tabel HTML Anda di WordPress.

cara menyesuaikan Tabel Ninja

Selain gaya, Anda juga dapat memilih apakah Anda ingin menampilkan judul tabel, deskripsi, bilah pencarian, filter kolom, baris header, batas, dll. Selain itu, Anda dapat mengatur perangkat target dengan mengaktifkan Konfigurasi Tabel Stackable agar tidak rusak di perangkat apa pun.

Gaya memang memainkan peran penting dalam daya tarik visual sebuah meja. Namun, warna paling penting. Tabel Ninja menawarkan kustomisasi warna lengkap dalam tab warna tabel. Anda dapat menyesuaikan semuanya, mulai dari warna header tabel hingga batas tabel, dan tidak ada batasan warna yang diizinkan.

Dan jika Anda tidak dapat memutuskan kustomisasi warna, Ninja Table hadir dengan tiga belas skema warna standar untuk tabel Anda! Namun, fitur luar biasa ini membutuhkan versi premium.

Tab desain tabel yang tersisa menampilkan berbagai fitur penyesuaian seperti pagination, posisi bilah pencarian, metode pengurutan, dan Anda dapat memberikan kelas CSS tambahan untuk desain tabel Anda.

Pengeditan Bagian Depan

Pengeditan Frontend adalah alasan lain yang patut dicontoh mengapa Ninja Tables lebih dari sekadar plugin tabel. Ini memungkinkan Anda untuk mengaktifkan pengeditan untuk pengguna front-end Anda. Misalnya, jika Anda membutuhkan pengguna untuk mengisi data tabel, Anda dapat memfasilitasi pengeditan frontend. Namun, fitur pengeditan frontend hanya tersedia pada versi premium.

CSS/JS Khusus

CSS khusus memungkinkan Anda mengontrol tampilan HTML di WordPress, dan dalam hal plugin, ini memberi Anda kendali atas tabel Anda. Meskipun artikel ini ditujukan untuk non-coders, mengetahui CSS dan Javascript dapat memberi Anda kontrol komprehensif atas tampilan Ninja Tables.

Ekspor Impor

Sekali lagi, fitur Impor memungkinkan Anda untuk mengimpor file CSV atau mengganti tabel yang ada melalui CSV. Di sisi lain, fitur ekspor akan memungkinkan Anda untuk menyimpan tabel Anda pada file CSV.

Integrasi

Ninja Tables menggabungkan semua alat dan fitur penting untuk membuat tabel HTML di WordPress tanpa kerumitan. Tetapi kekuatannya tidak terbatas pada pembuatan meja. Ini jauh lebih dari sekadar plugin tabel dan dilengkapi dengan beberapa integrasi yang luar biasa. Semuanya menawarkan fasilitas yang luar biasa!

  • Integrasi Formulir Lancar
  • Postingan WP
  • WooCommerce
  • Google Spreadsheet
  • Grafik Ninja
membuat tabel secara manual di WordPress

Integrasi Formulir Lancar

Sebagai pemilik situs web, Anda mungkin menggunakan plugin formulir di situs web Anda. Bagaimana jika Anda ingin memasukkan entri formulir ke dalam tabel? Tabel Ninja mengambil entri formulir Anda untuk membuat dan menampilkan tabel tanpa mengharuskan Anda melakukan apa pun kecuali menyiapkan tabel.

WP Fluent Forms adalah plugin formulir kontak terbaik di dunia saat ini, dan jika Anda telah menggunakan plugin untuk mengumpulkan data dari audiens Anda, Anda dapat memasukkannya ke tabel WordPress Anda tanpa harus berbuat banyak.

Integrasi WP Posting

Tabel Ninja tidak hanya membawa entri formulir kontak Anda ke tabel. Itu juga dapat mengatur semua posting, produk, halaman, dan banyak lagi ke dalam tabel dalam beberapa klik. Jika Anda ingin mengategorikan posting atau produk Anda, integrasi tabel Ninja WP Posts dapat meminimalkan pekerjaan Anda secara signifikan.

Integrasi WooCommerce

WooCommerce adalah plugin toko WordPress paling populer. Namun, sejumlah besar orang yang menggunakan WooCommerce juga berarti banyak dari mereka menawarkan pengalaman pengguna yang sama. Tabel Ninja dengan integrasi WooCommerce adalah plugin legendaris yang dapat menawarkan keragaman di situs Anda dan efektivitas di backend Anda. Ini meningkatkan tingkat konversi sambil memungkinkan manajemen toko WooCommerce paling mudah! Ninja Tables adalah yang Anda butuhkan untuk mengelola toko WooCommerce Anda.

Integrasi Google Spreadsheet

Sungguh luar biasa apa yang disembunyikan Ninja Tables di balik lengan bajunya! Itu yang kamu pikirkan, kan?

Mungkin, Google Sheets adalah salah satu opsi integrasi terbaik yang dapat ditawarkan oleh plugin WordPress mana pun. Google Sheet adalah spreadsheet online paling populer dengan fungsi paling sederhana. Aplikasi web benar-benar memiliki fitur kelas dunia, dan yang lebih penting, dapat diakses dari perangkat apa pun!

Tabel Ninja dapat terhubung dengan lembar google mana pun dan menampilkan datanya di situs web Anda sebagai pembaruan lembar. Jadi, jika Anda perlu memperbarui tabel Anda saat bepergian, integrasi google sheets Ninja Tables adalah masterclass mutlak!

Integrasi Ninja Charts

Tabel bekerja dengan data. Kami bergantung pada tabel WordPress karena mereka menunjukkan data statistik kepada kami. Namun, terkadang kita perlu sedikit kreatif dan menemukan cara grafis untuk menunjukkannya. Integrasi Ninja Charts adalah solusi sempurna untuk menghasilkan presentasi visual dari data tabel. Ingin melihat apa yang dapat Anda lakukan dengannya? Lihat videonya!

Membungkus

Dengan Ninja Tables, Kesulitan membuat tabel HTML tingkat lanjut di WordPress akhirnya berakhir! Ini adalah solusi satu atap untuk semua pengguna WordPress yang perlu menampilkan tabel data yang indah sambil membuang kode HTML.

Jadi, buat meja, tingkatkan interaksi, tingkatkan konversi, dan lakukan lebih dari sekadar membangun meja menggunakan Ninja Tables.

Itu saja untuk hari ini. Saya berharap yang terbaik untukmu.

Harga Meja Ninja

Rekan penulis: Nusrat Fariha

Nusrat adalah penulis konten kreatif di WPManageNinja yang suka mengerjakan beragam topik. Dan ketika dia tidak sedang menulis, dia mungkin sedang membaca buku favoritnya!