Tabel Post Banyak

Simpan di atas 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%}

Kemudian untuk cara menggunakan di html artikel postnya

<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>

Hasilnya seperti ini

FEATURES	AVAILABILITY
Responsive	Oke
Multi Author Template	Good
Free Blogger Templates	Oke
Featured Slider	True
Recent Posts Widget	Yes
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

Contoh yang lain di bawah ini

FEATURES	AVAILABILITY
Mantul	Oke
Unlimites	JElas
Free Blogger Templates	Oke

Share this post