Pada postingan suatu blog kadang kala kita membutuhkan suatu tabel yang disisipkan didalamnya, namun sebagian para blogger pemula belum mengetahui bagaimana caranya. Maka dari itu pada tutorial kali ini saya akan memberikan tips bagaimana Cara Mudah Membuat Tabel Responsive Pada Blogger.
Karna dengan membuat isi postingan yang responsive merupakan salah satu cara untuk meningkatkan pengunjung blog. Seperti yang kita ketahui pengunjung blog pasti mengakses situs anda dengan berbagai macam jenis perangkat seperti computer, Laptop, Smartphone dan sebagainya dengan berbagai jenis tampilan oleh sebab itu di butuhkan struktur tampilan blog yang responsive maupun postingannya.
Tentunya suatu hal yang baik jika kita menerapkan tabel yang responsive pada postingan blog, karena membuat blog kita tidak terlihat membosankan dan dapat menarik minat pengunjung untuk berlama-lama dalam blog kita. Hal tersebut juga memudahkan para pembaca dalam memahami isi postingan kita. Jadi ikuti langkah berikut ini untuk menerapkannya pada blog.
Cara Membuat Tabel Responsive di Blogger
1. Petama masuk ke Blog anda > Pilih Tema > kemudian pilih Edit HTML
2. Kemudian letakkan kode ini tepat berada di atas kode ]]></b:skin> atau </style>
/* Table Post 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;}
3. Untuk menerapkannya di dalam postingan kita, pilih menu Postingan > Entri Baru > Pilih menu HTML (Ingat Bukan Compose)
4. kemudian letakkan kode ini di dalamnya
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th>Nama</th><th>Keterangan</th> </tr> <tr><td>Nama1</td><td>Goindoti1</td> </tr> <tr><td>Nama2</td><td>Goindoti2</td> </tr> <tr><td>Nama3</td><td>Goindoti3</td> </tr> <tr><td>Nama4</td><td>Goindoti4</td> </tr> </tbody></table>
5. Kemudian edit kata-katanya sesuai keinginan anda, kemudian Publikasikan
Cukup mudah bukan untuk menerapkan tabel yang responsive pada postingan blog. Jadi demikian tutorial bagaimana Cara Mudah Membuat Tabel Responsive Pada Blog. Semoga informasinya bermanfaat dan sampai juga pada postingan selanjutnya. Jika ada sesuatu yang tidak dipahami bisa langsung meninggalkan pesan pada kolom komentar.