Membuat Tabel di Blog Dengan HTML

Membuat Tabel di Blog Dengan HTML - Oke, tanpa ngomong panjang lebar, Langsung Saja ke tutorialnya.

Login Blogger.com -> Template -> Edit HTML.

Masukkan code di bawah ini tepat di atas code ]]></b:skin>

 /* CSS Post Table */
.post-body table td, .post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #33ad95;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body td:hover{background:#fafafa;}
.post-body th{background:#33ad95;color:#fff;}
.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;}
img {max-width:100%;height:auto;border:none;}
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%}
.widget ul {padding:0;} 

Lalu, Untuk menggunakan tabel ini gunakan code di bawah ini. Taruh di tab HTML (Bukan Compose).

 <table>
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table> 

Nah, nanti setelah di gunakan akan seperti inilah hasilnya.

Megumi Katou	Kasumigaoka Utaha	Eriri Spencer
MK blog	MK blog	MK blog
1234567890	0987654321	10102000
Bebas	Bebas	Bebas

Ok, demikian Tutorial singkat tentang Membuat Tabel di Blog Dengan HTML. Semoga bermanfaat dan Selamat berkreasi.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Mau Jadi Bagian Dari Blog Katou?

Situ Oke? Tapi Sering Bete?

Ketentuan Berkomentar

• Komentar yang tidak sesuai topik lebih baik disampaikan di halaman Off topic.
• Komentar yang menyertakan link hidup tidak akan ditampilkan / dihapus.
• Format link yang diterima :
• http://megumi-katou.blogspot.com ganti menjadi Megumi Katou.
• http://megumi-katou.blogspot.com/p/sitemap.html ganti menjadi megumi[-]katou[dot]blogspot[dot]com/p/sitemap[dot]html.
• blogger.com ganti menjadi blogger atau blogger[dot]com.
• Gunakan Name/URL untuk Kunjungan Balik.
• 26 maret 2015