src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/> Cara Membuat Tabel Responsive di Blog Cepat dan Work 100% - teachertekno.com

Cara Membuat Tabel Responsive di Blog Cepat dan Work 100%

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.

<tr>
Cara Membuat Tabel Responsive pada Blog Cepat & Work 100%<tr>Cara Membuat Tabel Responsive pada Blog Cepat & Work 100%</tabledangt;

Untunglah, saya sudah melewati masa-masa menciptakan tabel HTML yang sulit di blog. Saya menemukan trik ini sebenarnya sudah lama sekali. Saat itu saya tidak sengaja menemukan trik ini saat mengerjakan tugas menciptakan 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 nir perlu koding buat membuat tabel. Adapun cara agar tabel yang dibentuk di Microsoft Word tersebut responsive, kita hanya perlu membarui kode CSS tabelnya.

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

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

Cara menciptakan tabel responsive di blog dan work 100% memakai Ms. Word 2010

Berikut ini cara membuat tabel responsive pada blog memakai ms. Office 2007 dan 2010 modern.

1. Buat tabel di Microsoft Word 2010 sinkron menggunakan tabel yg akan dibentuk dipostingan.

<tr>
Cara Membuat Tabel Responsive pada Blog Cepat & Work 100%<tr>Cara Membuat Tabel Responsive pada Blog Cepat & Work 100%</tabledangt;

2. Masuk ke sajian blog dan buat entri baru buat 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 sekitar seperti di bawah ini dari tabel sebagai 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 aku (table-responsive dan table) sehingga buat cara memanggilnya aku pakai kode pada bawah ini:

<div class='table-responsive'>

<table class="table">

data tabel

</table></div>

Ingat kode group CSS table-responsive & table mungkin saja tidak sinkron pada setiap templatenya.

7. Ubah kode yang dari Ms. Word 2010 tersebut dalam tag table-nya aja. Lihat misalnya:

<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 buat pratinjau kembali.

Dengan memakai Microsoft Word untuk membuat tabel, prosesnya jauh lebih cepat dan supaya responsive, gunakan kode CSS group pada template blog.

Coba bayangkan apabila engkau harus menciptakan tabel buat postingan engkau 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 ketika yg sangat lama & relatif sulit buat pemula.

Pastikan engkau memahami cara memanggil tabel responsive pada template blog yg kamu pakai. Kalau engkau tidak mengetahuinya maka kamu sanggup saja menggunakan kode CSS pembuat tabel responsive lainnya.

Lihat jugacara hapus komentar bawaan blogspot

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

0 Response to "Cara Membuat Tabel Responsive di Blog Cepat dan Work 100%"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel