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 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, metahead, 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.

Cara Membuat Tabel HTML via MS Word & Memindahkan ke Posting Blog
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 31 Comment(s):

Albeit Suryahsyah said...

masih bingung mas,tapi akan kucoba baca lagi sampai faham

abanggoyes said...

thanks kang Azmi, ini nih yang aku pingin tahu, tapi selalu kelupaan buat nyari di google.

Elbuy Zamen said...

Waw, saya baru tahu tabel dalam MS Word bisa memunculkan kode HTML. saya cma mencoba simbol lalu saya pindahin ke Dreamweaver untuk memunculkan kode HTML

Minato Hienzo said...

Biarpun sudah tahu, tapi saya suka baca post mas azmi karena gak membosankan dan penjelasannya cukup detail :D

Agung Buton said...

Halo Bang Azmi.. Saya mau nanya nih, gmn sih caranya membuat tabel yang responsive. Kan terkadang gambar yang kita masukan dalam postingan itu kodenya seperti di bawah ini :
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-cUJbn0wuhB4/UK84xrZYZqI/AAAAAAAAD8s/tcWKLbjOhDE/s1600/kondisi-meta-tag-pada-blog.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Meta Tag Blog Saya" border="0" height="260" src="http://4.bp.blogspot.com/-cUJbn0wuhB4/UK84xrZYZqI/AAAAAAAAD8s/tcWKLbjOhDE/s400/kondisi-meta-tag-pada-blog.jpg" title="Meta Tag Blog Saya" width="430" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Halaman Penyempurnaan HTML</b></td></tr>
</tbody>
</table>

Saya udah edit2 kode gambar dan kode tabelnya supaya responsive tapi nda ngefek sama sekali dan lebar tabelnya nda mengikuti lebar area postingan?

Ahmad Khoirul Azmi said...

semua elemen yang tidak memiliki pernyataan ukuran (width, height) baik langsung melalui atribut HTML maupun CSS pasti akan mengikuti lebar maksimal elemen yang melingkupinya (bersifat fluid). Jadi tabel anda sudah bersifat fluid tuh (tidak ada aturan width dan height). Yang perlu diperhatikan adalah gambarnya. anda harus mengatur gambar agar responsive dengan beberapa aturan CSS. Di situ kita liat anda menggunakan atribut height dan weight pada tag gambar (260 dan 430), sehingga ukuran gambar fixed, tidak berubah.
untuk membuat gambar responsive, buat aturan CSS baru dan gunakan atribut class pada tag gambar, misal class="gambarrespo"
lalu buat aturan cssnya. Gunakan auto pada width serta properti max-width dan atau min-width, contoh:
.gambarrespo {width:auto; max-width: 100%; min-width: 200px;}

Ahmad Khoirul Azmi said...

Satu lagi, responsive tidaknya suatu elemen juga bergantung pada konsep responsive yang diterapkan pada template, jika template anda tidak responsive, maka aturan tersebut tidak akan ngefek.

Agung Buton said...

Template blog saya udah saya responsive kan kok Bang dan sementara edit2 ulang nih gambar2 dalam postingannya. Hehehe pasti akan sangat melelahkan sih dan akan terasa malas untuk melakukannya tapi mau diapakan namanya juga mau nyoba hal2 baru. Ok Bang saya coba terapkan dulu penjelasannya

infosaja.com said...

Kalau saya mas pakai web penyedia atau pembuat tabel langsung dari webnya outputnya kode html dan css.

Alief Rezki said...

wah cara agak lama nih, tetapi gpp deh buat nambah ilmu

Hasby Ash Shiddiq said...

keren-keren.....
Ternyata dengan mengubah eksistensi file MS Word, bisa diupload untuk menggatikan tabel HTML yang sudah tersedia di blog.
Besok-besok saya coba mas..

ardikars said...

Mantap, lebih mudah dengan cara ini gan

YudhaB_G said...

wih baru tahu thx akang :)

infobisabanget said...

thanks atas infonya,,,
klo ada waktu mampir ya gan...

Agung PSM said...

thank's, artikelnya sangat bermanfaat nih :)

Visit back : blog-mas-agung.blogspot.com

VanRyuuji said...

thanks mas. sangat berguna buat newbie seperti saya..

fajrimansyahshare said...

masih agak bingung mas, tapi masih berusaha mencoba sampai bisa !

Yayat Hidayat said...

Makasih Mas, ini berguna sekali untuk newbie seperti saya. Dapat ilmu baru nie..(y)

Ma wan said...

baru tahu saya pak.. hehe makasih nambah ilmu lagi nih , salam, kunjungan pertama nih :D

Arifin Noviyadi said...

kebetulan saya lagi penelitian penerapan model belajar quantum learning menggunakan blog.. infonya berguna buat merancang konten dalam blog saya.. thx mas... :)

pulsalongreload said...

kalau untuk office 2003 bisa gak mas?

Agung Car said...

Saya belum pernah coba cara buat tabel dengan MS Word, sepertinya menarik untuk dicoba, mudah-mudahan simple dan tidak rumit. Terima kasih Mas Azmi

ki-tapunya said...

Terimakasih mas, akan saya coba buat tabelnya, walaupun masih sedikit bingung, he he.

kiosparquet said...

Kereennn..
Thanks Infonya gan, langsung praktek nih...

umar danny said...

ohh baru tau saya di ms.word bisa ya, terima kasih untuk artikelnya mas..

Rahmat Dani said...

Terimakasih atas infonya mas..
mantap bener tekniknya
langsung Ctr+D
:D

kalo kita pake microsoft excel bisa juga yah mas?

Lani Martin said...

Buka blog mas ini bikin tablet ku cepat panas, nih mas...

nursyam septiadi said...

wah, mantap tipsnya, baru kepikiran

Pro Tech said...

saya coba dulu kang...trims infonya

Eko Marwanto said...

Terima kasih infornya, Ane mau coba dulu nih di Microsoft 2013.

nikan urara said...

thank gan saya au bikin tabel dari kemari2 cari gak ada yang bener.setelah aq praktekin tutorial di atas ternyata berhasil.

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap