Cara Membuat Tabel Responsive di Postingan Blog

Sebagian blogger mungkin membutuhkan tabel untuk membuat sebuah perbandingan, keterangan, atau bisa juga digunakan untuk menulis spesifikasi produk.

Membuat tabel di postingan blog memang sangat mudah, Anda bisa mengnyalin (copy) tabel yang sudah dibuat menggunakan excel kemudian menempelkannya (paste) pada saat menulis artikel.

Tapi jika ini dilakukan yang terjadi tabel tersebut tidak akan memiliki warna maupun garis, dan hanya akan terlihat seperti tulisan polos namun sudah dibagi menjadi beberapa kolom dan baris.

Artinya jika kamu copy paste tabel langsung dari excel maka hasilnya kurang bagus.

Untuk membuat tabel responsive di postingan blog kita perlu menambahkan kode css agar tampilan tabel menjadi lebih menarik, keren, dan cantik.

Untuk membuat tabel di dalam postingan atau artikel blog, kita harus membuatnya secara manual dengan menggunakan beberapa kode tag html.

Menurut saya sih, memang agak ribet kalau mau bikin tabel di blogger.

Karena harus dibuat manual, apalagi jika tabel tersebut punya banyak baris dan kolom.

Sebenarnya bisa juga dibuat menggunakan excel kemudian di copy paste di blog, dan supaya tampilannya bagus maka kode cssnya harus disesuaikan dengan kode tabel dari excel.

Tapi tenang saja, disini saya akan memberikan penjelasan membuat tabel di postingan blog dan cara menambahkan baris dan kolom pada tabel.

Jika Anda tertarik untuk membuat tabel responsive di postingan blogger, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Tabel Responsive di Blogger

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy kode css di bawah ini, kemudian Paste sebelum kode ]]></b:skin> atau </style>

/* CSS Post Table */
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. Kemudian klik Simpan tema
5. Silahkan buka postingan blog Anda
6. Setelah berada di halaman posting, klik bagian HTML bukan Compose
7. Lalu copy kode tabel di bawah 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. Silahkan edit sesuai dengan kebutuhan Anda

Catatan:
1. Untuk menambahkan heading atau judul gunakan kode tag <th>.....</th>
2. Untuk menambahkan baris gunakan kode tag <tr>.....</tr>
3. Untuk menambahkan kolom gunakan kode tag <td>.....</td>

Silahkan Anda pahami kode-kode di atas karena menurut saya kode ini cukup mudah untuk dipahami, tapi kalau kalian masih bingung silahkan berkomentar di artikel ini atau bisa menghubungi kami melalui halaman kontak.

Itulah artikel mengenai cara membuat tabel responsive di postingan blog, semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini