Cara Membuat Tabel Responsive Pada Postingan Blog

Assalmualaikum Wr. Wb.
Hai Gan :D Pada kesempatan kali ini Mr D ingin berbagi Cara Membuat Tabel Responsive Pada Postingan Blog. 
Apa itu Tabel Responsive? 
Tabel Responsive adalah sebuah tampilan yang memungkinkan postingan kita terbaca sempurna (tidak terpotong) jikalau postingan blog tersebut dibuka melalui tablet ataupun smartphone.

Tabel Responsive

  Adapun caranya adalah sebagai berikut :

1. Login ke Blogger Anda > pilih menu Tema > selanjutnya        pilih menu edit HTML.
2. Letakkan kode script berikut tepat diatas kode ]]></b:skin> (untuk mempermudah bisa dicari menggunakan CTRL F pada menu HTML)
Kode scriptnya :

/* Tabel Blogger Responsive */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.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 {color:#666;font-size:80%;padding:0px 8px 8px !important;}
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%}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
table tr:nth-child(odd):hover td {background:#b0b1b4;}

pastikan kode tersebut termuat dan tersimpan dengan benar, lalu klik simpan Tema.

3. Selanjutnya tinggal membuat postingan baru (New Post),      lalu rubahlah menjadi HTML bukan compose.
    Lalu letakkan kode tabel berikut di postingan Anda         tersebut.
Kode tabelnya :

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>caproet</th><th>animethok</th> </tr>
<tr><td>caproet1</td><td>animethok1</td> </tr>
<tr><td>caproet2</td><td>animethok2</td> </tr>
<tr><td>caproet3</td><td>animethok3</td> </tr>
<tr><td>caproet4</td><td>animethok4</td> </tr>
</tbody> </table>

** Gantilah kata "caproet" dan "animethok" dengan data  yang ingin anda inginkan.
** Jika anda ingin menambahkan tabel lagi, tinggal tambahkan kode : <tr><td>caproet4</td><td>animethok4</td> </tr>  tepat diatas kode : </tbody> </table>

Sekian postingan Mr D kali ini tentang Cara Membuat Tabel Responsive Pada Postingan Blog, semoga bermanfaat dan salam Blogger Gan :D

Sincerely,

Mr D