Cara Membuat Tabel Keterangan pada Postingan Blog

Tentunya anda pernah melihat tabel keterangan pada sebuah blog yang anda kunjungi. Tabel ini berfungsi menampilkan suatu keterangan yang dimuat dalam artikel. Contohnya seperti keterangan spesifikasi ponsel. Tentunya hal demikian mempermudah pembaca untuk mengetahui keterangan spesifikasi dari sebuah ponsel.

Contoh Tabel Keterangan

Cara Membuat Tabel Keterangan

Untuk membuat tabel pada postingan seperti pada contoh gambar diatas, anda bisa mengikuti tata cara berikut ini.

1. Buka dasbor blog anda
2. Pilih Template > Edit HTML
3. Cari (CNTRL+F) kode ]]></b:skin> atau </style>
4. Kemudian salin dan paste kode CSS dibawah ini diatas salah satu kode tadi

/* Table Post */
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 #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.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) &gt; td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) &gt; td:hover {background-color:#fbfbfb;}
.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=&quot;_blank&quot;]: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%}

Setelah itu simpan kembali template blog anda. Kemudian pada saat setiap anda membuat artikel yang membutuhkan tabel, maka salin dan paste kode berikut ini pada menu HTML disamping Compose yang ada pada pos terbaru blog anda.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detail:</th> <th>Keterangan</th> </tr>
<tr> <td>keterangan anda</td> <td>Beauty</td> </tr>
<tr> <td>keterangan anda</td> <td>norak</td> </tr>
<tr> <td>keterangan anda</td> <td>OK</td> </tr>
<tr> <td>keterangan anda</td> <td>Lumayan</td> </tr>
<tr> <td>keterangan anda</td> <td>Kuno</td> </tr>
<tr> <td>keterangan anda</td> <td>Makyus</td> </tr>
<tr> <td>keterangan anda</td> <td>Panas</td> </tr>
<tr> <td>keterangan anda</td> <td>Dingin</td> </tr>
<tr> <td>keterangan anda</td> <td>Huhui</td> </tr>
<tr> <td>keterangan anda</td> <td>Bagus</td> </tr>
<tr> <td>keterangan anda</td> <td>Sip</td> </tr>
<tr> <td>keterangan anda</td> <td>Cantik</td> </tr>
<tr> <td>keterangan anda</td> <td>Indah</td> </tr>
<tr> <td>keterangan anda</td> <td>Jorok</td> </tr>
<tr> <td>keterangan anda</td> <td>Kotor</td> </tr>
</tbody> </table>

Ubah keterangan yang ada pada kode diatas sesuai dengan keterangan yang anda inginkan. Sebaiknya simpan kode ini pada notepad sehingga bisa anda gunakan pada saat butuhkan.