Cara Membuat Tabel HTML via MS Word & Memindahkan ke Posting Blog

Membuat tabel dalam format HTML memang gampang-gampang susah. Selain dibutuhkan ketelitian saat membuatnya secara manual, juga perlu perhatian lebih terhadap desainnya. Dulu, lebih dari 2 tahun yang lalu, saya pernah menyajikan tips membuat tabel HTML mudah di blog menggunakan online tool untuk mempermudah proses penyusunan tabel. Tapi dalam hal desain (layout, CSS), butuh usaha ekstra keras juga karena tidak semua tool pembuat tabel memiliki template dengan desain yang variatif. Apalagi bagi anda yang belum begitu akrab dengan HTML dan CSS, tentu pekerjaan ini menjadi sesuatu yang cukup berat.

Sedikit flashback, tabel di dalam posting atau artikel blog menjadi sangat penting karena apabila anda perlu menampilkan konten berupa daftar, chart, atau tabel itu sendiri, diperlukan layout halaman yang mendukung. Dengan demikian, isi konten lebih tertata rapi, mudah diikuti dan dirunut oleh pembaca, sekaligus bisa menjadi penambah daya tarik konten.

Saya punya trik khusus membuat tabel menggunakan Microsoft Word dan memindahkannya ke dalam posting blog hanya dengan beberapa langkah sederhana. Kelebihan tabel MS Word adalah anda dapat mendesain terlebih dahulu tampilan dan isi tabel sesuai dengan keinginan, bahkan anda bisa menggunakan berbagai desain template tabel yang sudah disediakan; tinggal menyesuaikannya sedemikian rupa dengan desain konten atau blog. Cukup dengan mengedit beberapa kode kecil saja agar sesuai dengan format post blog, tabel yang anda buat akan memuaskan. Bagaimana caranya? Let's go!

Cara Membuat Tabel HTML dengan Microsoft Word

Note: Saya menggunakan Microsoft Office 2007 sebagai peraga dan contoh dalam gambar.

1. Buat tabel seperti biasanya saat anda membuat tabel di MS Word. Saya sarankan tidak membuatnya secara manual (membuat satu persatu) tapi gunakan fitur insert > Table, klik lalu buat susunan tabel sesuai dengan jumlah kolom yang diinginkan.

2. Sebenarnya anda bisa saja mengisi konten ke dalam tabel nanti saat tabel sudah dimasukkan ke dalam post, tapi menurut saya akan terlalu ribet. Oleh karena itu, sebaiknya konten dimasukkan saat masih dalam MS Word, sehingga lebih mudah untuk mengedit, mengatur, dan mendesain tampilan tulisannya.

3. Buat desain tabel dengan menggunakan fitur "Design", yang akan muncul di sisi kiri menu teratas setelah anda memasukkan tabel ke dalam lembar editor MS Word. Anda bisa memilih berbagai pre-made templates (built-in) yang sudah disediakan, sesuaikan dengan kebutuhan layout tabel serta desain/layout blog.

4. Terakhir, setelah table dibuat dan didesain sedemikian rupa, simpan. Yang perlu diperhatikan adalah: jangan simpan sebagai file MS Word (doc maupun docx), tapi simpan sebagai WebPage,Filtered > "Save As" dan pilih WebPage,Filtered (*.htm/*html).

Setelah itu, masih ada proses lagi, cuma sedikit kok.

Cara Memindahkan Tabel MS Word Ke Posting Blog

Setelah disimpan, maka file akan memiliki ekstensi .htm. Berikut langkah-langkah mengedit dan memasukkannya ke dalam posting blog.

1. Buka file tersebut dengan notepad.

2.  Di dalamnya anda akan melihat berbagai tag html lengkap seperti milik halaman web sesungguhnya. Yang perlu diperhatikan adalah tidak semuanya dibutuhkan. Yang perlu ditambahkan adalah elemen yang biasa berada di dalam tag div dan juga style-nya (CSS) yang diapit oleh tag style. Hapus tag html, meta, head, dan body. Jangan lupa hapus tag penutupnya juga, contoh: </head>. Hanya sisakan dua tag yang saya sebutkan tadi. Jika masih belum jelas, perhatikan gambar-gambar berikut, yang saya highlight adalah yang harus dihapus:

4. Setelah dihapus copy semua kode dan paste/masukkan ke dalam post editor. Pastikan sudah klik mode "HTML" di bagian kiri atas (Blogger) atau di bagian kanan atas (WordPress) post editor, tepatnya di sebelah di sebelah mode "Compose".

Setelah memastikan semua kode diedit dan dimasukkan dengan benar, serahkan semua proses parsing dan koreksi pada engine Blogger. Proses ini terjadi saat anda mengembalikan ke mode "Compose". Jadi langkah selanjutnya adalah mengembalikan ke mode "Compose", lalu lihat hasilnya.

Berikut contoh tabel yang saya buat via Microsoft Word:

nge-test	test 1	test 2	test 3	test 4
a	1	2	3	4
b	5	6	7	8
c	9	10	11	12
d	13	14	15	16

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Tweet