Ditulis oleh: Ditulis pada: 5/18/2020
Cara Mudah Membuat Table Responsive Valid HTML5 Dan AMP - Dengan cara ini maka kita akan lebih mudah dalam membuat table di postingan blog.
Seperti kita ketahui bahwa sekarang di editor post terbaru Blogger di tahun 2020 ini terdapat fitur baru untuk insert table ke dalam postingan.
Namun setelah saya coba dan saya cek kodenya, ternyata kode table-nya tidak valid HTML5 dan AMP. Untuk itu kini saya buatkan trik agar mudah dalam membuat table yang responsive, valid HTML5, dan valid AMP HTML.
Langkah Pertama
Silahkan simpan style CSS untuk table responsive di style blog Anda. Jika blognya sudah memiliki CSS table responsive ini, silahkan skip langkah ini.
Silahkan copy CSS table responsive dari postingan berikut: Membuat Table Responsive Di Postingan
Langkah Kedua
Selanjutnya silahkan buat table yang dimaksud, agar mudah dalam membuat table, silahkan gunakan aplikasi sejuta umat yaitu Excel. Tentunya Anda sudah familiar dengan Excel, bukan?
Setelah table-nya selesai dibuat, silahkan copy table-nya.
Langkah Ketiga
Silahkan masuk ke https://www.tablesgenerator.com/html_tables lalu klik menu File dan pilih Paste table data, silahkan paste table yang dicopy dari Excel tadi di kotak yang muncul, lalu klik Load.
Kemudian silahkan klik tombol Generate dan centang option Do not generate CSS, lalu klik tombol Copy to clipboard.
Langkah Keempat
Selanjutnya masuk ke editor postingan yang sedang Anda buat lalu paste kode table yang tadi dicopy dari Table Generator di mode HTML.
Kemudian silahkan ganti kode <table> dengan kode berikut:
<div class='table-responsive'>
<table class="table">Dan jangan lupa tambahkan penutup </div> di bawah penutup </table>
Selesai, mudah bukan?
Agar lebih jelas, silahkan tonton video berikut ini.