11 September 2016

Cara Membuat Tabel Responsive Di Postingan Blogspot Menggunakan Ms Word

Cara Membuat Tabel Responsive Di Postingan Blogspot Menggunakan Microsoft Word - Untuk membuat tabel dipostingan blogspot tidaklah sulit. Tabel yang dibuat dari Microsoft word untuk ditampilkan pada postingan blogspot tidak responsive secara otomatis, tetapi ada beberapa template yang membuat tabel yang dibuat dari ms.word otomatis responsive saat digunakan pada postingan blogspot. 

Cara Membuat Tabel Responsive Di Postingan Blogspot Menggunakan MS.Word


Kunci utama membuat tabel tersebut menjadi responsive adalah kode ini width=100% dengan menggunakan kode tersebut, maka tabel yang tadinya kita buat menggunakan Ms.Word akan menjadi responsive dengan menambahkan kode tersebut pada bagian ini :
 <table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
 style='border-collapse:collapse;border:none width=100%'>
Sekarang kita buat tabelnya seperti dibawah ini di Ms.Word
Tabel Responsive 1
Tabel Responsive 2
Isi Responsive 1
Isi Responsive 2

Baca juga :

Setelah tabelnya jadi, save as dan ganti save as type menjadi webpage, filtered . Kemudian buka file tabel yang tadi kita buat menggunakan notepad, lalu cari kode tabel. Biar cepat mencarinya, tekan ctrl + f, kemudian ketikkan table class. Dibawah ini adalah kode tabel yang diatas.


<table class=MsoTableLightListAccent6 border=1 cellspacing=0 cellpadding=0
 style='border-collapse:collapse;border:none width=100%'>
 <tr>
  <td width=318 valign=top style='width:238.15pt;border:solid #FABF8F 1.0pt;
  background:#F79646;padding:0cm 5.4pt 0cm 5.4pt'>
  <p class=MsoNormal align=center style='margin-bottom:0cm;margin-bottom:.0001pt;
  text-align:center;line-height:normal'><b><span style='color:white'>Tabel Responsive
  1</span></b></p>
  </td>
  <td width=318 valign=top style='width:238.2pt;border:solid #FABF8F 1.0pt;
  border-left:none;background:#F79646;padding:0cm 5.4pt 0cm 5.4pt'>
  <p class=MsoNormal align=center style='margin-bottom:0cm;margin-bottom:.0001pt;
  text-align:center;line-height:normal'><b><span style='color:white'>Tabel
  Responsive 2</span></b></p>
  </td>
 </tr>
 <tr>
  <td width=318 valign=top style='width:238.15pt;border:solid #FABF8F 1.0pt;
  border-top:none;padding:0cm 5.4pt 0cm 5.4pt'>
  <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
  normal'><b>Isi Responsive 1</b></p>
  </td>
  <td width=318 valign=top style='width:238.2pt;border-top:none;border-left:
  none;border-bottom:solid #FABF8F 1.0pt;border-right:solid #FABF8F 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt'>
  <p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
  normal'><b>Isi Responsive 2</b></p>
  </td>
 </tr>
</table>
Tambahkan source code yang bewarna merah pada bagian tersebut. Dan copy paste source code tabel diatas pada postingan dibagian tab HTML. Letakkan pada posisi yang diinginkan, contohnya seperti gambar dibawah ini

Cara Membuat Tabel Responsive Di Postingan Blog Menggunakan MS.Word


Maka secara otomatis, tabel  yang dibuat menggunakan Microsoft word akan menjadi responsive pada postingan blogspot. Agar tabelnya terlihat bagus, silahkan edit terlebih dahulu di Ms.Word dengan pilihan tabel yang telah disediakan pada bagian Design, kemudian tinggal tambahkan kode width=100% pada source code table=class seperti keterangan diatas.


EmoticonEmoticon