Membuat Tabel Responsive Pada Postingan BLOG - PenyairCoding (Bergerak & Kemudian Terjadi)
Latest Post
Tunggu...

Sabtu, 19 Oktober 2019

Membuat Tabel Responsive Pada Postingan BLOG

Mungkin sahabat BLOGGER pernah bertanya bagaimana cara membuat tabel yang responsive pada postingan BLOG. Oke disini kita akan bahas bagaimana cara membuat tabel yang responsive pada postingan BLOG. Mungkin ada yang bertanya lagi, tapi saya tidak ingin yang ribet, oke kita bahas semua nya disini. Biar adil pertama kita coba buat dengan menggunakan HTML. Langkah pertama sobat masuk kedalam postingan pilih HTML bukan Compose kemudian copy-paste kode dibawah ini, kemudian previev atau pratinjau.
<table>
<tr>
<td>Contoh 1</td>
<td>Contoh 2</td>
</tr>
</table>
Oke, kreasikan tabel diatas sesuai keinginan kalian. Next kita bahas bagaimana cara buat tabel pada postingan BLOG TANPA NGODING.
Langkah pertama masuk ke excel.
Copy data di excel.
Kemudian masuk ke https://www.tablesgenerator.com/, ikuti langkah nya seperti gambar dibawah ini.
pilih file kemudian Paste Table Data
Kemudian akan tampil pop up seperti gambar dibawah ini, lalu paste data dari excel tersebut ke halaman pop up tersebut.
kemudian klik load
Sobat BLOGGER bisa edit sesuai keinginan, baik pewarnaan, bentuk tulisan dan lain-lain. Langkah selanjutanya adalah generate dan copy clipboard.
klik generate kemudian klik Copy to clipboard
Masuk ke BLOG buat postingan baru, masuk kedalam mode HTML (bukan compose), kemudian paste atau bisa menggunakan fungsi CTRL+V.
Agar tabel menjadi resposive, cari kode dibawah ini, atau bisa menggunakan fungsi CTRL+F kemudian cari kode dibawah ini.
<table class="tg">
Kemudaian rubah menjadi kode berikut
<table class="tg" style="table-layout: fixed; width: 100%;"><tbody>
Atau jika tidak menemukan kode diatas, copy kode dibawah ini tepat diatas kode </body> .
<table class="tg" style="table-layout: fixed; width: 100%;"></table>
Selesai tabel pada postingan sobat akan tampil dan resposive. Berikut hasil screenshot gambar jadi nya.
hasil screenshot.
Oke sekian , selamat mencoba and good luck ...

    Choose :
  • OR
    To comment
Tidak ada komentar:
Write comments