Table biasa di gunakan untuk menciptakan rincian atau spesifikasi baik untuk informasi harga atau ke unggulannya, dan bagi blog yang membahas tutorial blog biasanya di gunakan untuk fitur fitur sebuah Template.
Dan kali ini aku akan memperlihatkan cara menciptakan Table di blog Valid AMP Html. Jika table untuk blog non AMP di pasang untuk blog valid AMP akan menciptakan blog menjadi kritis, dan salah satu artikel blog akan menjadi eror AMP atau blog tidak lagi jadi blog AMP.
Berikut yaitu 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 instruksi CSS di bawah ini di dalam style amp-custom untuk postingan baik untuk versi desktop ataupun versi mobile bila 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 teman dapat memakai instruksi 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 dapat teman ubah di notepad sesuai dengan kebutuhan sobat
Semoga bermanfaat !
