Buat Tabel Keren yang Responsif di Postingan Blog
Terkadang ketika sedang membuat postingan, kita perlu menggunakan tabel untuk menampilkan sebuah data dan agar terlihat rapi dan lebih nyaman untuk dilihat. Nah kali ini saya akan berbagi Tutorial membuat tabel keren yang responsif di postingan sebuah blog. Tabel ini sangat cocok untuk membuat pengumuman sebuah nilai atau bahkan untuk menampilkan beberapa review pada sebuah produk, Yuk simak penjelasannya dibawah ini.
Cara Membuat Tabel Keren Responsif di Postingan Blog.
- Hal pertama yang dilakukan ialah Login ke Blogger > Lalu pilih Tema > Kemudian sobat bisa memilih menu Edit HTML.
- Untuk menjaga keamanan atau merasa takut blog bermasalah alangkah baiknya untuk membackup dulu tempalet file.
- Lalu silahkan cari menggunakan kode CTRL+F kode ini ]]> atau , letakkan kode dibawah ini tepat diatas kode ]]> atau .
/* CSS Table */
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;font-size:16px;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid $(body.link.color);font-weight:bold;color:#fff;padding:10px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#7babed}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.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) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{display:inline-block}
.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%}
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%}- Lalu kemudian sobat klik Simpan Tema.
Keterangan :
#7babed : Warna background judul table
Nah jika sobat online ingin membuat tabel pada postingan, sobat bisa meletakkan kode pemanggil dibawah ini di setiap postingan yang ingin berikan tabel (pastikan di HTML ya, bukan Compose).
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><th>Judul Kolom 1</th> <th>Judul Kolom 2</th> <th>Judul Kolom 3</th></tr>
<tr><td>Isi kolom 1a</td> <td>Isi kolom 2a</td> <td>Isi kolom 3a</td></tr>
<tr><td>Isi kolom 1b</td> <td>Isi kolom 2b</td> <td>Isi kolom 3b</td></tr>
<tr><td>Isi kolom 1c</td> <td>Isi kolom 2c</td> <td>Isi kolom 3c</td></tr>
<tr><td>Isi kolom 1d</td> <td>Isi kolom 2d</td> <td>Isi kolom 3d</td></tr>
<tr><td>Isi kolom 1e</td> <td>Isi kolom 2e</td> <td>Isi kolom 3e</td></tr>
</tbody>
</table>Selesai sekarang tabel sudah bisa digunakan pada postingan blog sobat semua. Berikut contoh hasilnya.
| Judul Kolom 1 | Judul Kolom 2 | Judul Kolom 3 |
|---|---|---|
| Isi kolom 1a | Isi kolom 2a | Isi kolom 3a |
| Isi kolom 1b | Isi kolom 2b | Isi kolom 3b |
| Isi kolom 1c | Isi kolom 2c | Isi kolom 3c |
| Isi kolom 1d | Isi kolom 2d | Isi kolom 3d |
| Isi kolom 1e | Isi kolom 2e | Isi kolom 3e |
Gimana keren kan, oke sob cukup sampai disini dulu artikel tutorial pada hari ini. Mohon maaf jika ada salah dalam hal penulisan dan mohon kiranya ketersediakan sobat online semua untuk meninggalkan komentar baik itu berupa saran ataupun masukan untuk kemajuan Blog ini. Terima kasih dan sampai jumpa di Artikel Berikutnya.
