Cara Membuat Tabel Responsive di Blog Cepat dan Work 100%

ANAKTEKNO.COM, Cara Membuat Tabel Responsive di Blog dan Work 100% - Selain menulis artikel, salah satu yang paling menyebalkan dalam ngeblog adalah membuat atribut seperti tabel. Tabel ketika dibuat di Microsoft Word sangat mudah, tapi di blog sangat ribet. Kita harus menulis kode HTML untuk tabel dan setelah diposting, hasilnya malah berantakan dan tidak responsive. Berbeda di WordPress yang lebih mudah karena dibantu dengan berbagai tools yang berguna.

Untunglah, saya sudah melewati masa-masa membuat tabel HTML yang sulit di blog blogspot dan WordPress. Saya menemukan trik ini sebenarnya sudah lama sekali. Saat itu saya tidak sengaja menemukan trik ini ketika mengerjakan tugas membuat tabel HTML.

Karena sulit mengatur tag tr, th dan td, maka saya Googling dan ketemu deh, cara membuat tabel HTML dengan cepat tanpa koding yang saya kembangkan menjadi cara membuat tabel responsive di blog menggunakan Microsoft Word.

Alasan menggunakan Microsoft Word karena kita tidak perlu koding untuk membuat tabel. Adapun cara agar tabel yang dibuat di Microsoft Word tersebut responsive, kita hanya perlu mengubah kode CSS tabelnya.

Perlu diketahui, bahwa sebuah template blog (blogspot) yang dibuat oleh Mas Sugeng, Arlina Design, Kompiajaib, Igniel dan lain sebagainya sudah dilengkapi dengan kode CSS tabel yang siap dipanggil kapan saja. Tugas kita adalah cara membuat tabel responsive di postingan blog dengan menggunakan kode CSS tersebut.

Adapun cara membuat tabelnya, kita tidak perlu koding HTML cara membuat tabel. Yang dibutuhkan hanyalah Microsoft Word agar proses pembuatan tabel blog lebih cepat.

Cara Membuat Tabel Responsive di Blog dan Work 100% Menggunakan Ms. Word 2010

Berikut ini cara membuat tabel responsive di blog menggunakan Microsoft Word office 2007, 2010 maupun versi terbaru:

1. Buat tabel di Microsoft Word 2010 sesuai dengan tabel yang akan dibuat dipostingan.

2. Masuk ke menu blog dan buat entri baru untuk posting artikel

3. Copy tabel dan data-data tabel dari Microsoft Word 2010 ke postingan blog pada mode Compose dan bukan mode HTML

4. Secara otomatis tabel yang ada di Word 2010 tadi akan tetap berbentuk tabel di postingan blog mode Compose

5. Tetap pada menu postingan blog, saatnya untuk mengubah mode Compose ke mode HTML

Maka hasilnya kurang lebih seperti di bawah ini dari tabel menjadi kode HTML:

<table border="1" cellpadding="0" class="MsoNormalTable" style="border: outset 2.25pt; mso-cellspacing: 1.5pt; mso-yfti-tbllook: 1184;"> <tbody>
<tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0;">   <td colspan="4" style="padding: .75pt .75pt .75pt .75pt;">   <div align="center" class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; text-align: center;">
<b><span style="font-family: &quot;Times New Roman&quot;,&quot;serif&quot;; font-size: 12.0pt; mso-fareast-font-family: &quot;Times New Roman&quot;;">Bokingan   Hari Biasa<o:p></o:p></span></b></div>
</td>  </tr>
</tbody></table>

6. Temukan kode CSS di template kamu dan cara memanggilnya. Cara mencarinya cukup mudah, yaitu gunakan CTRL + F terus masukkan di kolom pencarian seperti Table atau lain sebagainya. 

Saya akhirnya menemukan kode CSS tabel template blog saya (table-responsive dan table) sehingga untuk cara memanggilnya saya gunakan kode di bawah ini:

<div class='table-responsive'>
<table class="table">
data tabel
</table></div>

Ingat kode class CSS table-responsive dan table mungkin saja berbeda pada setiap templatenya.

7. Ubah kode yang dari Ms. Word 2010 tadi pada tag table-nya aja. Lihat contohnya:

<div class='table-responsive'>
<table class="table"><tbody>
<tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0;">   <td colspan="4" style="padding: .75pt .75pt .75pt .75pt;">   <div align="center" class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; text-align: center;">
<b><span style="font-family: &quot;Times New Roman&quot;,&quot;serif&quot;; font-size: 12.0pt; mso-fareast-font-family: &quot;Times New Roman&quot;;">Bokingan   Hari Biasa<o:p></o:p></span></b></div>
</td>  </tr>
</tbody></table><div>

8. Jangan ubah lagi mode HTML ke Compose karena tag div bisa berubah yang menyebabkan tabel jadi tidak responsive bahkan tidak tampil di blog.

9. Sebelum publikasikan artikel, pastikan untuk pratinjau kembali.

Dengan menggunakan Microsoft Word untuk membuat tabel, prosesnya jauh lebih cepat dan agar responsive, gunakan kode CSS class pada template blog.

Coba bayangkan jika kamu harus membuat tabel untuk postingan kamu seperti di bawah ini!

<div class='table-responsive'>
  <table class="table">
    <tr>
      <th colspan="4" class="tg-center tg-bf">Bokingan Hari Biasa</th>
    </tr>
    <tr>
      <td>Jenis Kamar</td>
      <td>Harga</td>
      <td>Jumlah Kamar</td>
      <td>Jumlah</td>
    </tr>
    <tr>
      <td>Ekonomi</td>
      <td>Rp. 150.000</td>
      <td>5 kamar</td>
      <td>Rp. 750.000</td>
    </tr>
    <tr>
      <td>Standar</td>
      <td>Rp. 200.000</td>
      <td>5 kamar</td>
      <td>Rp. 1.000.000</td>
    </tr>
    <tr>
      <td>Standar AC</td>
      <td>Rp. 300.000</td>
      <td>4 kamar</td>
      <td>Rp. 1.200.000</td>
    </tr>
<tr>
<td>VIP/Family</td>
<td>Rp. 350.000</td>
<td>1 kamar</td>
<td>Rp. 350.000</td>
</tr>
</table>
</div>

Akan butuh waktu yang sangat lama dan cukup sulit untuk pemula.

Pastikan kamu tahu cara memanggil tabel responsive di template blog yang kamu gunakan. Kalau kamu tidak mengetahuinya maka kamu bisa saja menggunakan kode CSS pembuat tabel responsive lainnya di website, termasuk Bootstrap jika perlu.

Demikianlah cara membuat tabel responsive di blog cepat dan work 100% menggunakan Ms. Word 2010. Semoga bermanfaat!

Anak Tekno
Tertarik dengan dunia Blog dan SEO sejak 2017 dan terus belajar sampai detik ini..