Kali inikita akan membahas tentang cara membuat tabel responsive di blog. Mengapa harus responsive? Karena di era moderen ini hampir semua orang menggunakan ponsel cerdas, itu sebabnya kita harus membuat blog ataupun konten responsive, agar isi blog kita bisa menyesuaikan layar yang mereka gunakan. Nah tabel ini sangat cocok untuk pstingan review gadget, spesifikasi dan lain lain.
Nah untuk membuatnya langsung kita praktikkan.
Cara Membuat Tabel Responsive di Blog
- Masuk ke dasboard blogger
- Template > edit HTML
- Cari kode </style> (untuk mempermudah gunakan ctrl+f)
- Copy dan letakkan CSS berikut sbelum </style>
/* CSS Post Table by mahesa.id*/
.post-body table th, .post-body table td, .post-body table caption{border:1px solid #d8dde1;padding:.2em .5em;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #d8dde1;}
.post-body th{font-weight:700;}
.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;border:1px solid #d8dde1;}
.post-body th{background:#2e9fff;color:#fff;}
.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;}
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%}
- Simpan template.
cara selanjutnya untuk kode pemanggil tabel.
buat postingan baru mode HTML
Baca: Cara Menambahkan Custom Ads.txt di Blog
Untuk tampilan seperti gambar di atas masukkan contoh kode berikut di postingan baru mode HTML
<table border=1>
<tr>
<th width=35%>Nama</th>
<td>Mahesa.id</td>
</tr>
<tr>
<th width=35%>..isi..</th>
<td>..isi..</td>
</tr>
<th width=35%>..isi..</th>
<td>..isi..</td>
</tr>
<th width=35%>..isi..</th>
<td>..isi..</td>
</tr>
</table>
Kemudian ganti ke mode Compose, dan ganti tulisan “isi” sesuai apa yang ingin kalian tulis..
Mudah kan…
Leave a Reply