Cara Memasang Tabel di Blog

Bagikan :

Facebook

Tweet

Linkedin

Pinterest

Halo sobat, kali ini saya akan membahas sedikit tutorial mengenai cara memasang table pada blog. Nah tentunya sobat seringkali melihat banyak blog-blog dengan tampilan tabel yang menarik bukan ? disini saya juga akan membagikan sedikit cara mengubah tampilan tabel yang sederhana menjadi menarik. Oke langsung saja ikuti tutorialnya :

Untuk membuat tabel sederhana sobat bisa gunakan script berikut , letakkan pada mode HTML bukan compose.

<div style="text-align: left;">
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Lama Waktu</th><th>Harga</th><th>Jumlah Artikel</th></tr>
<tr><td>1 Bulan</td><td>Rp.130.000,00</td><td>300 Kata/hari</td></tr>
<tr><td>1 Bulan</td><td>Rp.265.000,00</td><td>600 Kata/Hari</td></tr>
<tr><td>1 Bulan</td><td>Rp.410.000,00</td><td>800 Kata/Hari</td></tr>
<tr><td>1 Bulan</td><td>Rp.575.000,00</td><td>1000 Kata/Hari</td><td>
</td></tr>
</tbody></table>

Silahkan sobat ganti nama-namanya dengan keinginan sobat sendiri.
Keterangan :
<th> = berfungsi untuk judul tabel atau nama paling atas, jadi jika sobat ingin menambahkan kolom atas silahkan sobat tambahkan kode berikut <th>Tulisan Sobat</th> sebelum kode </tr>paling atas.

<td> berfungsi untuk menambahkan kolom bawah, untuk menambahkannya sama seperti menambah kolom atas namun kode <th> diganti dengan <td> dan </th> diganti dengan </td>

Untuk ukuran saat ini masih dalam style responsive, jadi belum bisa diatur. hanya bisa mengikuti tulisan dan tampilan layar saja.

Untuk tampilan warna saat ini masih mengikuti template blog sobat, namun jika sobat ingin mengganti tampilannya agar lebih menarik silahkan ikuti tutorial berikut :

1.Masuk ke blogger.com lalu pilih template dan klik edit html , setelah itu cari css mengenai table lalu hapus dan gantikan dengan css berikut.

/* CSS Post Table */
.post-body table td, .post-body table caption{border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #009abf;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:#00acd6;color:#fff;}
.post-body th:hover{background:#009fc6;}
.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;}

silahkan sobat atur warna sesuai keinginan sobat . semoga ulasan tadi bisa bermanfaat untuk kita semua dan terimakasih.

Tag : Blog