Latest News

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

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

Sedikit flashback, tabel di dalam posting atau artikel blog menjadi sangat penting sebab apabila anda perlu menampilkan konten berupa daftar, chart, atau tabel itu sendiri, diharapkan layout halaman yang mendukung. Dengan demikian, isi konten lebih tertata rapi, mudah diikuti dan dirunut oleh pembaca, sekaligus mampu 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 yaitu anda dapat mendesain terlebih dahulu tampilan dan isi tabel sesuai dengan keinginan, bahkan anda mampu menggunakan aneka macam desain template tabel yang sudah disediakan; tinggal menyesuaikannya sedemikian rupa dengan desain konten atau blog. Cukup dengan mengedit beberapa instruksi kecil saja semoga 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 pola dalam gambar.

1. Buat tabel menyerupai biasanya ketika 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 mampu saja mengisi konten ke dalam tabel nanti ketika tabel sudah dimasukkan ke dalam post, tapi menurut aku akan terlalu ribet. Oleh sebab itu, sebaiknya konten dimasukkan ketika 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 mampu memilih aneka macam 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 aneka macam tag html lengkap menyerupai milik halaman web sesungguhnya. Yang perlu diperhatikan yaitu tidak semuanya dibutuhkan. Yang perlu ditambahkan yaitu elemen yang biasa berada di dalam tag div dan juga style-nya (CSS) yang diapit oleh tag style. Hapus tag html, metahead, dan body. Jangan lupa hapus tag penutupnya juga, contoh: </head>. Hanya sisakan dua tag yang aku sebutkan tadi. Jika masih belum jelas, perhatikan gambar-gambar berikut, yang aku highlight yaitu yang harus dihapus:
4. Setelah dihapus copy semua instruksi dan paste/masukkan ke dalam post editor. Pastikan sudah klik mode "HTML" di adegan kiri atas (Blogger) atau di adegan kanan atas (WordPress) post editor, tepatnya di sebelah di sebelah mode "Compose".

Setelah memastikan semua instruksi diedit dan dimasukkan dengan benar, serahkan semua proses parsing dan koreksi pada engine Blogger. Proses ini terjadi ketika anda mengembalikan ke mode "Compose". Kaprikornus langkah selanjutnya yaitu mengembalikan ke mode "Compose", lalu lihat hasilnya.

Berikut pola tabel yang aku 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