Table biasa di gunakan untuk membuat rincian atau spesifikasi baik untuk info harga atau ke unggulannya, dan bagi blog yang membahas tutorial blog biasanya di gunakan untuk fitur fitur sebuah Template.
Dan kali ini saya akan memberikan cara membuat Table di blog Valid AMP Html. Jika table untuk blog non AMP di pasang untuk blog valid AMP akan membuat blog menjadi kritis, dan salah satu artikel blog akan menjadi eror AMP atau blog tidak lagi jadi blog AMP.
Berikut adalah demonya
| Fitur | Fitur |
|---|---|
| Valid AMP | Yes |
| Responsif(Mobile freindly) | Yes |
| 2 button Menu via Mobile | Yes |
| Popular Post Carousel di atas Footer | Yes |
| Grid style post (Responsif) | Yes |
| fixed Social Share | Yes |
| Space iklan | Yes |
| Navigasi Blog-pager di Home post dan post | Yes |
| Dan Lain Lain |
bagaimana tertarik untuk memasangnya ?
Silahkan simpan kode CSS di bawah ini di dalam style amp-custom untuk postingan baik untuk versi desktop ataupun versi mobile jika di pisahkan
/* Table by CzRandy.Net */
.post-body table[border="1"] th,.post-body table[border="1"] td,.post-body table[border="1"] caption{border:1px solid;padding:.2em .5em;text-align:left;vertical-align:top}
.post-body table.tr-caption-container{border:1px solid #e5e5e5}
.post-body th{font-weight:bold}
.post-body table[border="1"] caption{border:none;font-style:italic}
.post-body table{background:#f6f6f6;width:100%}
.post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #e5e5e5}
.post-body th{padding-left:13px;background:#eee}
.post-body table.tr-caption-container td{background:#f6f6f6;border:none;padding:8px}
.post-body img{max-width:100%;height:auto}
.post-body img,.post-body table.tr-caption-container{max-width:100%;height:auto}
.post-body .separator img{max-width:92%;height:auto}
.post-body td.tr-caption{color:#666;font-size:80%;padding:0 8px 8px}
img{max-width:100%;height:auto;border:0}
table{max-width:100%}
.clear{clear:both}
.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
body{background:#dddddd none repeat scroll top left;margin:0 0 0 0;padding:0 0 0 0;color:#333333;font:normal normal 13px Droid Sans,Arial,sans-serif;text-align:left}Untuk cara menggunakannya sobat bisa menggunakan kode di bawah ini di mode Html postingan
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>Fitur</th>
<th>Fitur</th>
</tr>
<tr>
<td>Valid AMP</td>
<td>Yes</td>
</tr>
<tr>
<td>Responsif(Mobile freindly)</td>
<td>Yes</td>
</tr>
<tr>
<td>2 button Menu via Mobile</td>
<td>Yes</td>
</tr>
<tr>
<td>Popular Post Carousel di atas Footer</td>
<td>Yes</td>
</tr>
<tr>
<td>Grid style post (Responsif)</td>
<td>Yes</td>
</tr>
<tr>
<td>fixed Social Share</td>
<td>Yes</td>
</tr>
<tr>
<td>Space iklan</td>
<td>Yes</td>
</tr>
<tr>
<td>Navigasi Blog-pager di Home post dan post</td>
<td>Yes</td>
<tr>
<td>Dan Lain Lain</td>
<td> </td>
</tr>
</tbody>
</table>Untuk tulisannya bisa sobat ubah di notepad sesuai dengan kebutuhan sobat
Semoga bermanfaat !
