Skip to main content

Cara Mudah Membuat Tabel Responsive di Blogger

Cara Mudah Membuat Tabel Responsive di Blogger - Membuat postingan yang responsive merupakan salah satu cara untuk meningkatkan pengunjung di blog. Apalagi dalam membuat tabel di dalam postingan blog tentunya harus responsive baik pada tampilan desktop atau pada tampilan mobile.

Oleh karena itu pada kesempatan kali ini saya akan membagikan cara membuat tabel keterangan pada postingan blog. Tabel ini juga saya gunakan dan saya terapkan sendiri di dalam blog saya, karena selain tampilannya yang keren, responsive juga cocok untuk tampilan smartphone (mobile).

Tentunya hal yang baik jika kita menerapkan tabel pada postingan blog, karena blog kita tidak terlihat seperti koran, lebih menarik, dapat menarik minat pengunjung untuk berlama-lama dalam blog kita, juga memudahkan para pembaca dalam memahami isi postingan kita.

Sebenarnya beberapa minggu yang lalu saya pernah membagikan cara membuat tabel keterangan. Namun karena ada beberapa alasan, maka saya membuat tabel responsive terbaru ini, karena menurut saya terlihat lebih baik dan tentunya cocok untuk berbagai macam template 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:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:14px 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 table tr:nth-child(even) > td:hover {background-color:#ecf0f1;}
.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%}

Contonya bisa dilihat seperti gambar di bawah ini:

3. Untuk menerapkannya di dalam postingan kita, pilih menu Postingan > Entri Baru > Pilih menu HTML

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>Analis</td><td>Analisyuki</td>
</tr>
<tr><td>Analis</td><td>Analisyuki</td>
</tr>
<tr><td>Analis</td><td>Analisyuki</td>
</tr>
<tr><td>Analis</td><td>Analisyuki</td>
</tr>
</tbody>
</table>

Contoh penerapannya bisa di lihat seperti ini:

5. Kemudian edit kata-katanya sesuai keinginan anda, kemudian Publikasikan

Sampai disini cukup sekian saja dari saya, semoga dengan tutorial cara memasang tabel pada postingan blog ini dapat bermanfaat bagi kita semua, jika ada sesuatu yang tidak dipahami bisa langsung menuju kolom komentar, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar