Cara Menciptakan Tabel Didalam Posting Blog Amp Dan Non Amp

Hallo Agan-agan apa kabar? biar sehat semuanya. Kali ini saya ingin membuatkan bahan blog sederhana yaitu perihal cara menciptakan tabel didalam postingan blog, baik itu blog AMP ataupun non AMP.

Dulu waktu belum tahu caranya, setiap kali akan menciptakan tabel didalam postingan Blog saya selalu menciptakan tabelnya melalui microsoft word terlebih dahulu kemudian kalau sudah final saya kopi paste dari MS word ke posting blog.

Memang Bisa sih.. tetapi tampilan tabelnya menyerupai kurang pantes gitu.. apalagi kalau dipaste kedalam posting blog template AMP, sudah niscaya akan menjadikan terjadinya invalid AMP dalam postingan blog tersebut. Lalu bagaimana cara menciptakan tabel didalam postingan blog yang benar?

Nah oleh alasannya yaitu itulah saya menciptakan posting perihal cara menciptakan tabel didalam postingan blog supaya Agan tidak melaksanakan apa yang dulu saya lakukan. caranya sangat gampang kok yaitu:

Copy instruksi CSS dibawah ini dan paste didalam instruksi CSS blog Agan

 /* Post Table */ .post-body table {width:100%;} .post-body table td,.post-body table caption{background-color:#fafafa;border:1px solid #e3e3e3;padding:10px;text-align:left;vertical-align:top} .post-body table th {border:1px solid #6f7cb0;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #d9534f;} .post-body th{font-weight:700;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #8bc34a;} .post-body th{background:#8593cc;color:#fff;} .post-body th:hover{background:#6f7cb0;} .post-body td a{color:#444;} .post-body td a:hover{color:#cf4d35;} .post-body table.tr-caption-container td {border:none;padding:8px;} .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;} .post-body li {list-style-type:square;} .post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;} .sr {visibility:hidden;width:0;height:0;}

Buat posting blog baru
Copy paste instruksi dibawah ini kedalam postingan blog mode HTML

 <table cellpadding="0" cellspacing="0" style="text-align: left;">     <tbody>         <tr>             <th>Table Header 1</th>             <th>Table Header 2</th>             <th>Table Header 3</th>         </tr>         <tr>             <td>Division 1</td>             <td>Division 2</td>             <td>Division 3</td>         </tr>         <tr>             <td>Division 1</td>             <td>Division 2</td>             <td>Division 3</td>         </tr>         <tr>             <td>Division 1</td>             <td>Division 2</td>             <td>Division 3</td>         </tr>     </tbody> </table>

Table Header 1 s.d 3 yaitu judul kolom tabel, sedangkan Division 1 dst yaitu baris tabel silahkan diganti sesuai dengan kebutuhan, untuk lebih jelasnya dibawah ini yaitu pola tabel yang sudah jadi dari instruksi diatas: