Cara Membuat Tabel Keren Di Postingan Blogger


Cara Membuat Tabel Keren Di Dalam Artikel - Tabel Atau Sering Di Sebut Kolom Sangat Berguna Untuk Merapihkan Atau Mempercantik Tampilan Postingan Artikel .. Salah Satu Yang Seharusnya Wajib Memakai Tabel Ini Adalah Blogger Yang Membagikan Postingan Nya Seperti Sepsifikasi Handphone Laptop Tempalate Dan Masih Banyak Lagi .. Nah Kegunaan Template Ini Pun Sangat Berpengaruh Terhadap Pengunjung Karna Dengan Menggunakan Tabel Di Dalam Sebuah Artikel Bisa Memanjakan Sang Pengujung Untuk Melihat Post Lainya Karna Tampilan Menarik Dan Rapih Tentu Saja Sang Pengunjung Blogger/Website Sangat Nyaman .. Langsung Saja Ke Tutorial Cara Membuat Tabel Keren Di Postingan Blogger

Langkah Pertama : Masuk Ke Blogger > Template > Edit Html
Langkah Kedua    : Masukan Kode Di Bawah Ini Tepat Di Bawah ]]></b:skin> atau </style>
/* CSS Post Table Shared By Mafsyah*/
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}

Langkah Ketika : Buat Postingan/Halaman baru Pilih Html Bukan Compose Copy Kan Kode Di Bawah Ini dan edit sesuai kebutuhan
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Daftar</th> <th>Spesifikasi</th> </tr>
<tr> <td>Harga</td> <td>2.000.000</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">Tahun</span></td> <td>2016</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">Network</span></td> <td>Banner, Rich media, pop up/under, text</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">Tipe</span></td> <td>Paypal, Wire Transfer, Payoneer</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">Ukuran</span></td> <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">Ukuran/Berat</span></td> <td>100%</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">Fitur</span></td> <td>NET 30</td> </tr>
<tr> <td>Kamera</td> <td>US, Europe traffic</td> </tr>
<tr> <td>Batre</td> <td>Seluruh negara</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">OS</span></td> <td>Yes</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">CPU</span></td> <td>Yes</td> </tr>
<tr> <td>Affiliasi</td> <td>Yes</td> </tr>
<tr> <td><span style="background-color: white; color: #444444; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 14px; font-weight: bold;">GPS</span></td> <td>Yes</td> </tr>
<tr> <td>Bluethoot&nbsp;</td> <td>Yes</td> </tr>
<tr> <td>Fitur Tambahan</td> <td>Hight risk</td> </tr>
</tbody> </table>

Apabila Sudah Selesai Silahkan Save Dan Lihat Hasilnya Sekian Tutorial Cara membuat Tabel Keren Di Postingan Blogger Semoga Bermanfaat
Demo

Belum ada Komentar untuk "Cara Membuat Tabel Keren Di Postingan Blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel