Cara Membuat Tabel Keren di Blog

Tabel adalah daftar yang berisi sejumlah informasi yang berupa kata atau bilangan, yang tersusun berturut ke bawah dalam kolom dan baris tertentu. Membuat tabel di Blog keren mempunyai beragam fungsi. Dalam sebuah blog tabel biasanya digunakan sebagai keterangan untuk menunjukkan Features template atau hal lainnya.

Cara Membuat Tabel Keren di Blog :

1.Masuk ke Akun blogger Anda
2.Pilih Menu Template pilih Edit HTML
3.Tambahkan CSS di bawah tepat diatas kode ]]></b:skin> atau </style>

/* 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) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > 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="_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%}

4.Simpan Template

Cara Memasang Tabel di Postingan Blog

1.Pilih Postingan yang akan di beri Tabel
2.Masukan HTML berikut pada Postingan ( klik Mode HTML bukan Compose)

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>FEATURES</th>   <th>AVAILABILITY</th> </tr>
<tr> <td>Responsive</td>   <td>Oke</td> </tr>
<tr> <td>Multi Author Template</td>   <td>Good</td> </tr>
<tr> <td>Free Blogger Templates</td>   <td>Oke</td> </tr>
<tr> <td>Featured Slider</td>  <td>True</td> </tr>
<tr> <td>Recent Posts Widget</td>   <td>Yes</td> </tr>
<tr> <td>Unlimited Sidebar widgets</td>   <td>True</td> </tr>
<tr> <td>Ads Ready</td>  <td>True</td> </tr>
<tr> <td>Customizable Color and Fonts Options </td>  <td>True</td> </tr>
<tr> <td>Social Icons Widget</td>  <td>True</td> </tr>
<tr> <td>Author Widget</td>   <td>True</td> </tr>
<tr> <td>Featured Post Style</td>  <td>True</td> </tr>
<tr> <td>Clean Elegant Design</td>   <td>True</td> </tr>
<tr> <td>SEO Optimized</td> <td>True</td> </tr>
<tr> <td>Fully responsive</td>  <td>True</td> </tr>
<tr> <td>404 custom page</td> <td>True</td> </tr>
<tr> <td>Social Media Icons in Footer</td> <td>True</td> </tr>
<tr> <td>Responsive Navigation</td> <td>True</td> </tr>
<tr> <td>Responsive Sidebar</td> <td>True</td> </tr>
<tr> <td>Social Share functionality</td> <td>True</td> </tr>
<tr> <td>Smooth Scroll</td> <td>True</td> </tr>
</tbody> </table>

3.Setelah itu Simpan.  selesai

Hasil Akhir :

FEATURES	AVAILABILITY
Responsive	True
Multi Author Template	True
Free Blogger Templates	True
Featured Slider	True
Recent Posts Widget	True
Unlimited Sidebar widgets	True
Ads Ready	True
Customizable Color and Fonts Options	True
Social Icons Widget	True
Author Widget	True
Featured Post Style	True
Clean Elegant Design	True
SEO Optimized	True
Fully responsive	True
404 custom page	True
Social Media Icons in Footer	True
Responsive Navigation	True
Responsive Sidebar	True
Social Share functionality	True
Smooth Scroll	True

Share this post