Cara Mudah Membuat Table Responsive Valid HTML5 Dan AMP

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.