Cara Membuat Tabel Responsive di Blogspot

 Pada postingan kali ini saya ingin membagikan tutorial cara membuat tabel responsive di blogspot. Walaupun kita telah menggunakan template yang responsive, seringkali tabel yang kita buat pada postingan tidak responsive, sehingga pada saat blog di buka menggunakan smartphone atau tablet ada sebagian tabel yang terpotong dan tidak tampak.

 Tentu saja hal semacam itu tidak baik, karena akan ada informasi yang hilang ataupun tidak lengkap ketika postingan blog di baca oleh pengunjung menggunakan smartphone atau tablet.

 Bagi sobat yang belum tahu cara membuat tabel yang responsive di blogspot, silakan simak tutorial cara membuat tabel responsive di blogspot dengan mudah berikut ini.

1. Login kedashboard blogger sobat.
2. Klik tema kemudian klik Edit HTML.
3. Kemudian sobat cari kode  ]]></b:skin> gunakan Ctrl+F untuk mempercepat pencarian.
4. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>.

/* CSS Post Table */ .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .post-body table caption{border:none;font-style:italic;} .post-body table{} .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 table tr:nth-child(even) > td:hover {background-color:#058feb;} .post-body th{background:#b6d7fc;font-weight:bold;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px} .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;} .post-body td a[target="_blank"]:after {margin-left:5px;} .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 td.tr-caption {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} 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:33.33%} table.columns-4 td.columns-cell{width:25%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%} .widget ul {padding:0;}

 Silahkan mengganti kode warna yang saya tandai dengan kode warna yang sobat inginkan.

5. Langkah selanjutnya simpan tema.

Setelah selesai memasang kode CSS tabel responsive kedalam template blog sobat, berikut adalah cara untuk membuat tabel responsive kedalam postingan blog.

 Cara untuk membuat tabel responsive dalam postingan blog, sangat mudah sobat cukup tempel kode dibawah ini dalam mode penulisan HTML

Contoh tabel responsive 2 kolom 4 baris.

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

Lihat contoh gambar dibawah, cara penulisan tabel responsive 2 kolom 4 baris dalam mode HTML.

Maka hasilnya akan tampak seperti contoh gambar dibawah.

Contoh tabel responsive 3 kolom 4 baris.

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

Lihat contoh gambar dibawah, cara penulisan tabel responsive 3 kolom 4 baris dalam mode HTML.

Maka hasilnya akan tampak seperti contoh gambar dibawah.

 Terkadang ada masalah saat tabel dibuka menggunakan smartphone, seperti sebagian kolom yang menyempit sehingga tidak nyaman untuk dibaca, maka sobat harus mengatur lebar salah satu kolom yang bermasalah tersebut dengan lebar tertentu atau dengan ukuran yang tepat.

 Sebelum kita melanjutkan bagaimana cara mengatur lebar kolom pada tabel responsive ini, kita terlebih dahulu melihat contoh tabel yang lebar kolomnya tanpa diatur dan  yang lebar kolomnya diatur pada ukuran yang tepat.

 Kita akan melihat perbedaan kedua tabel ini bila di buka menggunakan smartphone seperti yang sobat lihat pada contoh gambar dibawah ini.

Contoh gambar tabel responsive lebar kolomnya tidak diatur dengan tepat.

Contoh gambar tabel responsive lebar kolomnya diatur dengan tepat.

Untuk mengatur lebar kolom tabel responsive yang bermasalah, sobat cukup menambahkan kode width=”50px”>. Dan cara penulisannya kode tabelnya akan seperti ini

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><th width="50px">Header Kolom 1</th><th>Header Kolom 2</th> <th>Header Kolom 3</th></tr>
<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td><td>Baris 1 Kolom 3</td></tr>
<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td><td>Baris 2 Kolom 3</td></tr>
<tr><td>Baris 3 Kolom 1</td><td>Baris 3 Kolom 2</td><td>Baris 3 Kolom 3</td></tr>
<tr><td>Baris 4 Kolom 1</td><td>Baris 4 Kolom 2</td><td>Baris 4 Kolom 3</td></tr>
</tbody> 
</table>

 Sobat bisa menyesuaikan lebar kolomnya sesuai keinginan sobat, berapa ukuran yang tepat untuk tabel responsive dalam postingan sobat. Yang sering bermasalah itu adalah lebar kolom yang pertama jadi untuk lebar kolom yang kedua biarkan lebarnya otomatis, jadi bisa melebar atau mengecil otomatis sesuai ukuran layar smartphone pengunjung blog.

  Demikian postingan mengenai Cara Mudah Membuat Tabel Responsive di Blogspot, semoga apa yang saya bagikan bermanfaat bagi sobat semua. Apabila ada pertanyaan silahkan meninggalkan komentar yang relevan di kotak komentar dibawah.