Cara Membuat Tabel Didalam Posting Blog AMP dan Non AMP

Hallo Agan-agan apa kabar? semoga sehat semuanya. Kali ini saya ingin berbagi materi blog sederhana yaitu tentang cara membuat tabel didalam postingan blog, baik itu blog AMP ataupun non AMP.

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

Memang Bisa sih.. tetapi tampilan tabelnya seperti kurang pantes gitu.. apalagi jika dipaste kedalam posting blog template AMP, sudah pasti akan menyebabkan terjadinya invalid AMP dalam postingan blog tersebut. Lalu bagaimana cara membuat tabel didalam postingan blog yang benar?

Nah oleh karena itulah saya membuat posting tentang cara membuat tabel didalam postingan blog supaya Agan tidak melakukan apa yang dulu saya lakukan. caranya sangat mudah kok yaitu:

• Copy kode CSS dibawah ini dan paste didalam kode 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 kode 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 adalah judul kolom tabel, sedangkan Division 1 dst adalah baris tabel silahkan diganti sesuai dengan kebutuhan, untuk lebih jelasnya dibawah ini adalah contoh tabel yang sudah jadi dari kode diatas:

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Nah begitulah cara membuat tabel didalam postingan blog AMP dan Non AMP yang benar mudah kan?? semoga bermanfaat dan terimakasih

Berbagi :