Cara Membuat Tabel Responsive Di Dalam Postingan Blog

Selamat malam shabat blogger kali ini admin akan berbagi tutorial nih cara membuat tabel di blog dan tentu responsive

Mungkin agan pernah membuat posting atau melihat di blog orang ada tabel seperti misal di blog Review semartphone contohnya ada kotak tabel atau juga agan suka berbagi template dan ingin membuat tabel untuk fitur-fitur agar terlihat rapih dan enak di baca
Hmm admin akan langsung ke tutorial bagi agan yang ingin mencoba/ memasang tabel ini silahkan simak baik baik dibawah ini ya

Langkah:

1. Masuk ke Blogger (wajib)
2. Klik Tema > Edit HTML
3. Silahkan copy kode css di bawah ini, kemudian paste tepat diatas kode ]]></b:skin> atau tepat diatas</style>


/* CSS Table Responsive */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

4. Setelah itu klik simpan tema
5. Disini anda coba membuat postingan baru/ artikel baru

6. Pilih entri baru, lalu pilih di bagian HTML bukan Compose (ingat)
7. Lalu copy kode html dibawah ini


<table cellpadding="0" cellspacing="0" style="text-align: left;">
  <tbody>
    <tr>
      <th>Specification :</th>
      <th></th>
    </tr>
    <tr>
      <td>Color</td>
      <td>Black / Silver</td>
    </tr>
    <tr>
      <td>Internal storage</td>
      <td>eMCP 32GB / 64GB</td>
    </tr>
    <tr>
      <td>MicroSD card</td>
      <td>Supports up to 2TB</td>
    </tr>
    <tr>
      <td>Google Drive</td>
      <td>100GB free space (1 year)</td>
    </tr>
    <tr>
      <td>Weight</td>
      <td>180 grams</td>
    </tr>
    <tr>
      <td>Dimension (W x D x H)</td>
      <td>159mm x 8.45mm x 76mm</td>
    </tr>
    <tr>
      <td>Display</td>
      <td>6-inch Full HD<br/>
      Front 2.5D curved<br/>
      1500:1 contrast ratio</td>
    </tr>
    <tr>
      <td>Processor</td>
      <td><b>CPU:</b> Qualcomm® Snapdragon™ 636<br/>
        <b>GPU:</b> Qualcomm® Adreno™ 509</td>
    </tr>
    <tr>
      <td>Memory</td>
      <td>LPDDR4X 3GB / 4GB / 6GB</td>
    </tr>
    <tr>
      <td>Main Rear Camera</td>
      <td>13MP / 16MP<br/>
Up to F2.0 aperture</td>
    </tr>
    <tr>
      <td>Second Rear Camera</td>
      <td>5MP<br/>
Portrait mode for depth sensing</td>
    </tr>
    <tr>
      <td>Front Camera</td>
      <td>8MP / 16MP</td>
    </tr>
    <tr>
      <td>Video Recording</td>
      <td>4K UHD (3840 by 2160 pixels)</td>
    </tr>
  </tbody>
</table>

8.Setelah itu silahkan edit teks sesuai artikel agan mau