Ada kalanya dalam membuat postingan dalam blog kita membutuhkan sebuah tampilan tabel untuk mempermudah dalam menyajikan suatu informasi kepada pengunjung.
Apa yang dimaksud tabel responsive ?
Tabel responsive adalah sebuah tampilan tabel yang bisa dibaca secara utuh di semua perangkat hp atau browser. Terkadang jika kita tidak membuat sebuah tabel tampilan tabelnya akan terpotong dan tidak bisa tampil secara utuh dikarenakan resolusi layar tiap perangkat berbeda beda.
Tentu saja itu akan menjadi sebuah masalah besar buat anda , karena jika seorang pengunjung melalui mobile melihat tampilan tabel yang tidak bisa dibaca secara utuh maka sudah bisa dipastikan pengunjung bakalan langsung ngacir meninggalkan blog anda tanpa meninggalkan jejak.
Akan tetapi untuk membuat tabel yang responsive cukuplah rumit jika harus menggunakan kode css dan html , untuk itu saya disini akan menjelaskan tentang cara membuat sebuah tabel responsive tanpa menggunakan kode css dan html yang ribet.
Berikut ini 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
Walaupun tampilannya agak berubah tetapi pada intinya tabel bisa ditampilkan secara utuh pada perangkat Hp.
Sekian dari saya tentang Cara membuat tabel responsive pada blogger
