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.

Tutorial bagaimana cara menambahkan tabel di WordPress

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. confused

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

insert tabel di wordpress
Gambar 1. Sisipkan tabel

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

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.

setting properti tabel
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.

tambahkan warna background
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).

hasil akhir tabel
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.

copy source code htmlGambar 6. Copy source code

Wordpress editor in text modeGambar 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 bermanfaathappy

Advertisements

One thought on “Cara Mudah Menambahkan Tabel di WordPress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s