Cara Mudah Membuat Table Responsive di Blogspot

Mimin

Cara Mudah Membuat Table Responsive di Blogspot

1. Memasang kode CSS

·         Login ke Dashboard blogspot Anda

·         Pilih Theme lalu klik Edit HTML

Edit HTML

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

Kode CSS

·         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

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

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.

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.