Cara Membuat Tabel Responsive Di Blogspot

Daftar Isi

Cara Membuat Tabel Responsive Di Blogspot - Postingan ini buat koleksi saya pribadi setelah tadi posting artikel tentang Harga Sepeda Piksi Di Toko Dunia Sepeda Jatibarang dan disitu ada postingan tabelnya yang saya copas dari suatu blog. Nah setelah di publish dan saya cek, ternyata itu tabel mbleber alias melebar keman-mana gak karuan atau istilahnya tabelnya tidak responsive mengikuti ukuran layar.

Nah kemudian saya browsing - browsing mencari tutorial cara membuat tabel responsive dan nemu beberapa blog yang mengulas membuat tabel responsive blogspot. Dari ke empat blog yang mengulasnya kebanyakan ribet cara menggunakannya, hehehe maklum saya masih newbie urusan beginia. Nah ada satu blog yang saya kira penjelasannya tentang membuat tabel responsive dengan mudah dan setelah saya praktekkan memang bener-bener mudah tanpa kita pusingkan dengan kode tertentu. Saya dapat infonya dari blog ini http://www.gancus.com/2016/11/cara-mudah-membuat-tabel-responsive-di-blogger-tanpa-ribet-menggunakan-css-dan-html-code.html

Oke gan saya copas aja ya tutorialnya dari blog agan gancus.com

Cara Mudah Membuat Tabel Responsive di Blogger Tanpa Ribet Memakai Css dan Html code

1. Gunakan Ms Excel untuk membuat sebuah tabel lalu copy tabel tersebut

2. lalu masuk ke http://www.tablesgenerator.com . Pilih File > Paste table data > lalu paste tabel yang sudah di copy tadi > pilih Load

3. Anda bisa mengedit tampilan tabel sesuka anda seperti memberi bakground , memberi warna teks dll.

4. Setelah itu pilih Generate pada bagian bawah lalu pilih Copy to clipboard

5. Masuk ke Blogger > Edit Entri > Pilih postingan yang akan diisi dengan tabel > Pilih mode Html ( jangan pilih compose ) > klik kanan > Paste . Maka otomatis kode tabel yang sudah anda buat tadi akan tercopy ke dalam postingan.

6. Langkah terakhir adalah mengedit kode tersebut agar tabel anda menjadi responsive , caranya adalah
tekan Ctrl + F cari kode:

 <table class="tg">

 Ganti dengan :

 <table class="tg" style="table-layout: fixed; width: 100%;"><tbody>

7. Selesai , silahkan dipublish dan lihat tampilan tabelnya melalui media hp atau perangkat lainnya. Saya jamin tabel akan terlihat utuh dan tidak terpotong.

Contoh tampilan tabel responsive via PC

Contoh tampilan tabel responsive Via Hp

Nah itu tadi gan informasi yang saya copas dari webnya agan gancus tentang Cara Membuat Tabel Responsive Di Blogspot. Semoga bermanfaat dan terimakasih banyak agan pemilik blog http://www.gancus.com/2016/11/cara-mudah-membuat-tabel-responsive-di-blogger-tanpa-ribet-menggunakan-css-dan-html-code.html atas ilmunya.