Widget HTML Atas

Cara Membuat Tabel di Blog AMP

Buat teman-teman yang masih bingung untuk membuat tabel dalam postingan yang dimana Blog nya di dukung AMP, secara kita tau dalam AMP tag style dilarang persis agar situs kita valid amp. maka ada cara mudah agar dalam sebuah postingan kita bisa membuat table dan pastinya valid dan tidak eror dalam postingan amp.

Lalu bagaimana Solusinya ?
sebenernya sangat mudah, kita hanya memakai situs pihak ketiga yang dimana kita diberi kode untuk ditempelkan di dalam postingan kita, berikut langkah nya:

memulai membuat table di blog amp

pertama : mulai lah membuat tabel beserta isi nya bisa di Microsoft Word atau Microsoft Exel.
kedua : jika sudah, maka Copy semua Tabel anda yang sudah di buat di Word atau Exel tadi
ketiga : tempelkan semua table anda disini : http://www.tablesgenerator.com/

dalam tabel generator ada beberapa menu dan mode pilihan dalam membuat table salah satunya dengan cara berikut :

  • Plih HTML Tables
  • lanjut pilih File
  • Pilih Paste table data
  • lalu paste kan semua Table yang anda buat tadi
 Bingung ? anda bisa melihat gambaran di bawah ini dari cara diatas :

cara membuat table amp
lalu kita diberikan kode untuk kita tempelkan di postingan anda, anda bisa scrool kebawah untuk melihat kodenya, dan jangan lupa untuk menceklis "Do Not Generate CSS" seperti gambar berikut :

Do Not Generate CSS


Nah langkah selanjutnya kita hanya mengcopy semua kode untuk kita letakan di dalam postingan, bagaimana cara nya yuk langsung saja :
1. Masuk ke Dasboar Blogger anda
2. pilih Post yang akan anda beri table lalu pilih Edit.
3. dalam postingan ubah menjadi Mode HTML lalu pastekan kode yang diberikan oleh Tabel generator tadi lalu save.

Tambahan : Jika anda ingin membuat tabel yang menarik maka tidak ada salah nya untuk menambahkan CSS di dalam template anda berikut kode nya :
caption,table,tbody{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}.post-body table caption,.post-body table td{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}.post-body table tr th{border:1px solid #4a8af5;font-weight:700;color:#fff;padding:14px 10px;text-align:left;vertical-align:top;font-size:14px}.post-body table th{background:#53b0ff}.post-body table.tr-caption-container{border:2px solid #fff}.post-body table caption{border:none;font-style:normal}.post-body td,.post-body th{vertical-align:top;text-align:left;font-size:14px;padding:4px 6px}.post-body table tr:nth-child(even) > td,.post-body table tr:nth-child(even) > td:hover{background-color:#fff}.post-body td a{color:#525354;padding:0 6px;font-size:100%;float:right;display:inline-block;border-radius:4px}.post-body td a:hover{color:#9bb8ff;border-color:#bbcbf1}.post-body td a[target="_blank"]:after{margin-left:6px}.post-body table.tr-caption-container td{border:none;padding:8px}.post-body td.tr-caption{color:#01043e;font-size:82%;padding:0 8px 8px}table{border-collapse:collapse;border-spacing:0;max-width:100%;width:100%;margin:1.5em auto}table.section-columns td.first.columns-cell{border-left:none}table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}table.columns-2 td.columns-cell{width:50%}table.columns-3 td.columns-cell{width:33.33%}table.columns-4 td.columns-cell{width:25%}table.section-columns td.columns-cell{vertical-align:top}table.tr-caption-container{padding:4px;margin-bottom:.5em}
Caranya memasukan nya yaitu : Masuk Dashobard Blogger > Tema/template > Edit HTML > Lalu cari kode </style> dan masukan kode diatas tepat diatas kode </style>.

Berikut kurang lebih cara membuat tabel di blog amp dari saya -Terima Kasih