Cara Mudah Membuat Tabel Pada Blog

Cara Membuat Tabel Pada Blog

Cara Membuat Tabel

Halo Sobat , pada kesempatan kali ini saya akan membagikan Cara Membuat Table pada Blog. Mungkin ada yang bertanya bagaimana sih caranya membuat tabel? Bagi yang belum tahu caranya langsung cek aja disini!!

#Langkah 1, Silahkan sobat masuk ke dasbor Blogger >> Template, setelah masuk ke Template silahkan tambahkan kode dibawah ini diatas </b:skin>

Masuk Ke Template

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
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:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

Akan Terlihat seperti gambar

Setelah itu jangan lupa untuk menyimpannya

#Kedua Setelah selesai menambah kode, silahkan anda Paste kode tabel dibawah ini pada psotingan sobat. yang past menambahkannya lewat HTML yah

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Fitur</th> <th>Ketersediaan</th> </tr>
<tr> <td>Responsive</td> <td>Yes</td> </tr>
<tr> <td>Seo</td> <td>Yes</td> </tr>
<tr> <td>Custom Threaded Comment</td> <td>Yes</td> </tr>
<tr> <td>2 Column</td> <td>Yes</td> </tr>
<tr> <td>Green Light Theme Color</td> <td>Yes</td> </tr>
<tr> <td>Top Navigation</td> <td>Yes</td> </tr>
<tr> <td>Stcky Navigation</td> <td>Yes</td> </tr>
<tr> <td>Main Navigation </td> <td>Yes</td> </tr>
<tr> <td>PopUp Button</td> <td>Yes</td> </tr>
<tr> <td>Auto Read More with Thumbnail </td> <td>Yes</td> </tr>
<tr> <td>Responsive Ad Slot</td> <td>Yes</td> </tr>
<tr> <td>Breadcrumbs</td> <td>Yes</td> </tr>
<tr> <td>Related Posts with Thumb </td> <td>Yes</td> </tr>
<tr> <td>Search Box </td> <td>Yes</td> </tr>
<tr> <td>Social Share Button </td> <td>Yes</td> </tr>
<tr> <td>Sidebar Tab Widget </td> <td>Yes</td> </tr>
<tr> <td>Author Box </td> <td>Yes</td> </tr>
<tr> <td>Custom 404 Page </td> <td>Yes</td> </tr>
<tr> <td>Smooth Scroll back To Top</td> <td>Yes</td> </tr>
<tr> <td>Better Print Page Layout </td> <td>Yes</td> </tr>
<tr> <td>Custom Subscribe Box Widget </td> <td>Yes</td> </tr>
<tr> <td>Well Documentation </td> <td>Yes</td> </tr>
</tbody> </table>

Sehingga nanti akan terlihat seperti ini

Fitur	Ketersediaan
Responsive	Yes
Seo	Yes
Custom Threaded Comment	Yes
2 Column	Yes
Green Light Theme Color	Yes
Top Navigation	Yes
Stcky Navigation	Yes
Main Navigation	Yes
PopUp Button	Yes
Auto Read More with Thumbnail	Yes
Responsive Ad Slot	Yes
Breadcrumbs	Yes
Related Posts with Thumb	Yes
Search Box	Yes
Social Share Button	Yes
Sidebar Tab Widget	Yes
Author Box	Yes
Custom 404 Page	Yes
Smooth Scroll back To Top	Yes
Better Print Page Layout	Yes
Custom Subscribe Box Widget	Yes
Well Documentation	Yes

Jangan lupa untuk mengganti teks nya sobat

#Penutup

Mungkin cukup sekian postingan saya kali ini semoga bermanfaat bagi anda. Trimakasih