Membuat Tabel Valid AMP dengan Bantuan HTML Table Generator

Ditulis oleh: Dibrata Nazar Yuda

Ditulis pada: Tuesday, June 26, 2018

Seperti judul yang saya terangkan diatas, kali ini saya akan berbagi pengalaman tentang cara cepat membuat postingan dengan Tabel agar Valid AMP dengan Bantuan HTML Table Generator. Cara ini sudah saya ujikan dan berhasil, hanya saja ada yang harus diedit sedikit dan prosesnya pun cepat, hanya tinggal copy paste saja.

Untuk script kodenya agar valid pada template AMP saya ambil dari blognya kompiajaib.com karena kebetulan blog tersebut bagi saya sangat bermanfaat untuk dikunjungi. Postingan ini dibuat hanya untuk mempercepat pembuatan tabel dengan bantuan generator html.

Untuk kode scriptnya bisa langsung ke blog kompiajaib.com agar lebih jelas, atau bisa lihat penampakannya dibawah ini :

Pertama - tama yang harus dilakukan adalah simpan kode CSS berikut ini di style edit HTML blog kamu seperti :

.table-responsive{min-height:.01%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top}
.table tr:nth-child(even) td{background-color:#F0F0E5}
.table th{background-color:#EAE2CF;color:#333;font-size:110%}
.table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF}
.tg-bf{font-weight:700}
.tg-it{font-style:italic}
.tg-left{text-align:left}
.tg-right{text-align:right}
.tg-center{text-align:center}
@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
.table-responsive>.table{margin-bottom:0}
.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}

Jika kode diatas sudah ada, abaikan saja.
Kemudian untuk menampilkan tabel responsive-nya pada postingan blog, terlebih dahulu silahkan buat tabel pada microsoft word. Setela tabel dibuat, block semua tabel tersebut lalu copy. Kemudian buka link http://www.tablesgenerator.com/, pilih HTML tables. Buka menu File dan pilih paste table data..., paste-kan tabel hasil copy-an tadi untuk selanjutnya tekan load.

Ceklist pilihan Do not generate CSS, Sebagai contoh, saya akan membuat lembar penilaian. Maka penampakannya seperti ini :

<table>
<tr>
<th>No</th>
<th>Nama Siswa</th>
<th>Unjuk Kerja (Performance)</th>
<th>Penugasan (Project)</th>
<th>Hasil Kerja (Product)</th>
<th>Tertulis (Paper &amp; Pencil)</th>
<th>Lisan ( Verbal )</th>
<th>Portofolio (Portfolio)</th>
<th>Penilaian antarteman ( Peer )</th>
<th>Sikap&nbsp;&nbsp;(Affectif)</th>
<th>Observasi ( Observation )</th>
<th>Diri (Self Assesstment)</th>
<th>Jurnal ( Journal )</th>
<th>Jumlah Skor</th>
<th>Nilai</th>
</tr>
<tr>
<td>2</td>
<td>Ahmad Sarif</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>Mulyadi</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>

Hapus kode <table> diatas dan ganti dengan <div class='table-responsive'> <table class="table"> dan tambahkan kode </Div> setelah kode </table>. Lihat penampakan tabel hasil dari generator HTML dibawah ini :


Untuk mengatur tata letaknya agar rata tengah, rata kiri atau rata kanan tambahkan kode class="tg-center tg-bf" seperti <th class="tg-center tg-bf"> atau <td class="tg-center">

Keterangan :

• tg-bf untuk huruf tebal
• tg-it untuk huruf miring
• tg-left untuk rata kiri
• tg-right untuk rata kanan
• tg-center untuk rata tengah

Bagaimana, mudah bukan?
Agar aktif pada postingan AMP, jangan lupa juga pilih "ya" untuk menampilkan redirect https pada settiingan basic di blog kamu.