Cara Mudah Membuat Tabel Responsive di Blogspot

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

Walaupun kita telah menggunakan theme 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.

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

Lantas bagaimana caranya membuat tabel responsive?

Ikuti langkah-langkah di bawah ini:

Cara Mudah Membuat Table Responsive di Blogspot

1. Memasang kode CSS

• Login ke Dashboard blogspot Anda
• Pilih Theme lalu klik Edit HTML

• Cari kode ]]></b:skin>  caranya, tekan Ctrl+F

• Letakkan kode dibawah ini tepat di atas 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) &amp;gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &amp;gt; td:hover {background-color:#0082d8;} .post-body th{background:#bcdbfe;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=&amp;quot;_blank&amp;quot;]: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;}

Salin Kode

• Pastikan bahwa kode telah di tempatkan dengan benar seperto terlihat pada gambar di bawah ini

• Terakhir, klik Simpan Tema

Jika diinginkan, Anda bisa mengubah huruf serta latar belakang sesuai dengan keinginan. Caranya lihat kode CSS dan gambar di atas yang saya tandai.

Setelah pemasangan kode CSS untuk tabel responive selesai, berikutnya adalah bagaimana cara membuat tabel pada postingan blog

2. Cara Membuat Tabel Responsive pada Postingan Blog

Untuk membuat tabel pada postingan blog, caranya sangat mudah sekali. Cukup tempel kode di bawah ini pada area postingan mode HTML. Seperti terlihat pada gambar di bawah ini

Contoh Tabel 2 kolom 5 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>
<tr> <td>Baris 5 Kolom 1</td> <td>Baris 5 Kolom 2</td> </tr>
</tbody> </table>

Salin Kode

Dan hasilnya akan terlihat seperti gambar dibawah ini:

Contoh Tabel 3 kolom 5 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>
<tr><td>Baris 5 Kolom 1</td><td>Baris 5 Kolom 2</td><td>Baris 5 Kolom 3</td></tr>
<tr><td>Baris 6 Kolom 1</td><td>Baris 6 Kolom 2</td><td>Baris 6 Kolom 3</td></tr>
<tr><td>Baris 7 Kolom 1</td><td>Baris 7 Kolom 2</td><td>Baris 7 Kolom 3</td></tr>
</tbody> </table>

Salin Kode

Dan hasilnya akan terlihat seperti gambar di bawah ini:

Demo Tabel Responsive

Itulah tadi tips sederhana cara membuat tabel responsive pada postingan di blogspot. Dengan tabel yang responsive maka tidak akan ada masalah lagi jika postingan pada blog kita di buka menggunakan smartphone atau tablet.

Update!

Jika mengalami masalah saat tabel dibuka menggunakan smartphone, seperti sebagian kolom yang menyempit sehingga tidak nyaman untuk dibaca, maka Anda harus mengatur lebar salah satu kolom yang bermasalah tersebut dengan lebar tertentu atau dengan ukuran yang fix.

Sebelum kita melanjutkan bagaimana cara mengatur lebar kolom pada tabel responsive ini, kita lihat terlebih dahulu contoh tabel yang lebar kolomnya tanpa diatur dan  yang lebar kolomnya diatur pada ukuran tertentu (fix).

Kita akan melihat perbedaan kedua tabel ini bila di buka menggunakan smartphone.

Lihat dua gambar berikut ini:

Agar tabel responsive bisa rapi seperti gambar di atas, maka pada kolom yang sebelah kiri harus kita buat lebarnya secara fix. Cara nya adalah sebagai berikut:

Cara Mengatur Lebar Kolom Pada Tabel Responsive

Untuk mengatur lebar kolom pada tabel responsive ini caranya sangat mudah, Anda tinggal menambahkan kode seperti ini width=”100px”. Sehingga kode tabel nya seperti berikut:

<table cellpadding=”0″ cellspacing=”0″ style=”text-align: left;”><tbody>
<tr> <th width=”100px”>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>

Anda bebas menentukan berapa lebar kolom sesuai kebutuhan dengan cara mengganti 100px dengan angka pilihan Anda. Untuk kolom sebelah kanan biarkan lebar kolom nya otomatis, agar tabel melebar atau mengecil dengan sendirinya sesuai ukuran layar pembaca blog kita.

Jika Anda ingin tahu perbedaan kedua tabel di atas, silakan buka link berikut ini menggunakan smartphone Anda.

Demo Tabel Kolom Diatur

Semoga bermanfaat,

Mungkin Anda tertarik juga untuk membaca:

Cara Mengatasi JavaScript Yang Memblokir Rendering