Cara Mudah Menambahkan Tabel di WordPress

Terkadang kita perlu menyisipkan tabel ke dalam postingan di blog, agar data yang kita tampilkan bisa lebih mudah dipahami oleh pengunjung. Beberapa contoh data yang lebih pas disajikan dalam tabel seperti jadwal pertandingan bola, jadwal puasa, hasil ujian siswa, hasil penelitian, dll. Memang kita bisa menampilkan dalam paragraf atau bullet list, tapi menurut saya lebih enak dibaca kalau pakai tabel.

Secara default, blog di wordpress.com bisa menampilkan data dalam format tabel, tapi sayangnya di WYSIWYG editor tidak ada fitur untuk menyisipkan tabel. Sehingga mau tidak mau kita harus memformat data tabel ke dalam tags HTML <table>...</table>. Kalau harus ‘coding’ dulu untuk sekedar memasukkan table, tentu akan memakan waktu yang cukup lama.

Nah, biar prosesnya cepat, Anda bisa menggunakan bantuan visual HTML editor online yang memiliki fitur insert table. Setelah table dan datanya dibuat, Anda cukup lihat HTML source codenya dan copy paste kan ke WordPress editor. Untuk detailnya, Anda bisa ikuti langkah-langkah berikut.

Menyisipkan Tabel di Blog WordPress

1. Buka website online html editor disini
2. Klik menu Table > insert table > tentukan jumlah baris dan kolom

Gambar 1. Sisipkan tabel

3. Masukkan data ke table
4. Klik kursor di bagian tabel > Klik menu tabel > tabel properties.

Gambar 2. Menu Properti tabel

5. Isikan nilai cell spacing, border tabel, cell padding (sesuai dengan selera) dan akhiri dengan klik tombol OK.

Gambar 3. setting properties di tabel

6. Sorot baris pertama (judul kolom) > tekan CTRL+B (bold)
7. Klik baris pertama > klik kanan > row > row properties > advanced > pilih warna background color. Klik kotak kecil di sebelah kanan bawah untuk menampilkan color picker (lihat gambar). Untuk contoh ini saya menggunakan warna background #88c2fc.

Gambar 4. warna background untuk baris tabel

8. Klik baris kedua dan ulangi langkah ke 7. Isi warna background dengan #f5f5f5.
9. Klik baris ketiga dan ulangi langkah ke 7. Isi warna background dengan #f0f0f0.
9. Untuk baris selanjutnya lakukan langkah seperti no 8 dan 9 (warna selang seling, cerah dan gelap).

Gambar 5. Tabel dengan background berwarna

10. Setelah selesai, klik menu source code di pojok kiri atas > copy kode mulai dari <table> sampai dengan </table>. Kemudian paste-kan di editor blog wordpress dalam text mode.

Gambar 6. Copy source code

Gambar 7. Paste code html tabel di WordPress text editor

Berikut ini tampilan tabel setelah di publish.

Nama Siswa	Nilai	Keterangan
Andika	9
Sinta	8
Dewi	8
Budi	7
Catur	6
Deny	6

 

Catatan: ada kalanya tampilan tabel di HTML editor berbeda dengan tampilan di blog. Hal ini disebabkan oleh format table yang ada di dalam stylesheet wordpress themes.

Semoga bermanfaat