Cara Mudah Membuat Tabel Postingan Blog Responsive di Blogspot

Tutorial cara membuat tabel postingan blog responsive ini saya tulis setelah saya sendiri mengalami kesulitan dalam membuat postingan blog dalam bentuk tabel. Sebenarnya tidak terlalu susah juga untuk membuatnya. Hanya saja kala itu belum tahu caranya jadi kelihatan susah. Setelah membaca pencerahan di google akhirnya tahu dan ternyata mudah. Kita hanya perlu memasang kode css yang mengatur model dan agar tabel bisa responsif.

Tips Serupa: Cara Membuat Notifikasi Cookies di Blogger Tanpa Menambah Loading Blog.

Bagi pengguna nonametemplate dari Bung Frangki seperti template yang saya gunakan ini sudah ada kode css untuk tabel postingan. Jadi yang perlu kamu lakukan hanya memanggil kode tersebut. Sebagai demo coba resize browser kamu saat membuka poatingan ini. Tabel keterangan di bawah responsif kan?

Tabel Postingan

Namun jika kamu bukan pengguna template tersebut, silahkan copy css berikut dan paste di bawah kode </b:skin>.

/* CSS Post Table */
.post-body 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 table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
.post-body table {max-width:100%;width:100%;margin:1.5em auto;}
.post-body table.section-columns td.first.columns-cell{border-left:none}
.post-body table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
.post-body table.columns-2 td.columns-cell{width:50%}
.post-body table.columns-3 td.columns-cell{width:50%}
.post-body table.columns-4 td.columns-cell{width:30%}
.post-body table.section-columns td.columns-cell{vertical-align:top}
.post-body table.tr-caption-container{padding:4px;margin-bottom:.5em}
.post-body 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}

Setelah selesai, sekarang gunakan kode berikut untuk membuat tabel di postingan blog.

<table><tbody>
<tr> <th>Nama</th>         <th>Keterangan</th> </tr>
<tr> <td>Ukuran layar</td> <td>14 Inch</td> </tr>
<tr> <td>Resolusi</td>     <td>1366 x 768</td> </tr>
<tr> <td>Processor</td>    <td>Intel i3-6006U dual-core 2GHz</td> </tr>
<tr> <td>RAM</td>          <td>4GB DDR4</td> </tr>
<tr> <td>Tipe Grafis</td>  <td>Intel HD Graphics</td> </tr>
<tr> <td>Hardisk</td>      <td>1TB 5400rpm</td> </tr>
<tr> <td><b>HARGA</b>      </td> <td><b>Rp 4.950.000 (Tokopedia)</b></td> </tr>
</tbody> </table>

Keterangan kode di atas adalah:

No	Nama	Keterangan
1	<table>	Untuk mendefinisikan tabel
2	<tr>	Untuk mendefinisikan baris tabel
3	<td>	Untuk mendefinisikan kolom tabel
4	<th>	Untuk mendefinisikan judul

Jika ingin menambahkan kolom cukup tambahkan kode kolom yaitu <td> sampai kode penutupnya </td>. Begitupun juga untuk menambahkan baris, tambahkan kode baris yaitu <tr> dengan penutupnya </tr>.

Sekian cara mudah membuat tabel postingan blog responsif, jika kamu masih belum paham dengan penjelasan saya silahkan berkomentar.