Cara Membuat Tabel di Dalam Postingan Blog

Cara membuat tabel di dalam postingan blog - Tabel merupakan susunan data dalam baris dan kolom, yang berfungsi untuk menjelaskan suatu hal secara rinci, seperti hal tabel spesifikasi hp, laptop atau harga produk. Tabel ini bersifat menjelaskan, yang terdiri dari 2 kolom, antara pengertian dan penjelasan. Tapi tahukah sobat, didalam blog atau website, kita juga bisa membuat tabel?, gak hanya di word atau excel aja. Jika tertarik untuk membuatnya, silahkan ikuti panduannya dibawah ini.

Cara Membuat Tabel di Dalam Postingan Blog

#1.  Masuk terlebih dahulu ke blogger.
#2. Pilih menu tema > pilih edit html.

#3. Copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau sebelum </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%}

#4. Jika sudah klik simpan pada template sobat.

Cara Memasang Tabel di Dalam Postingan Blog

#1. Sekarang saatnya menempelkan kode tabelnya pada postingan sobat, copy kode dibawah ini dan paste kan di postingan sobat dalam mode HTML bukan Compose. Seperti gambar dibawah ini.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detail:</th>   <th>RevenueHits</th> </tr>
<tr> <td>Website URL</td>   <td>url here</td> </tr>
<tr> <td>Tipe jaringan</td>   <td>CPM, CPC, CPA</td> </tr>
<tr> <td>Tipe iklan</td>   <td>Banner, Rich media, pop up/under, text</td> </tr>
<tr> <td>Metode pembayaran</td>  <td>Paypal, Wire Transfer, Payoneer</td> </tr>
<tr> <td>Minimal Payout</td>   <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
<tr> <td>Fill rate</td>   <td>100%</td> </tr>
<tr> <td>Frekuensi pembayaran</td>  <td>NET 30</td> </tr>
<tr> <td>Rate eCPM tertinggi</td>  <td>US, Europe traffic</td> </tr>
<tr> <td>Penerimaan traffic</td>  <td>Seluruh negara</td> </tr>
<tr> <td>Ad Mobile</td>   <td>Yes</td> </tr>
<tr> <td>Ad custom format</td>  <td>Yes</td> </tr>
<tr> <td>Affiliasi</td>   <td>Yes</td> </tr>
<tr> <td>Bebas virus dan malware</td> <td>Yes</td> </tr>
<tr> <td>Dukungan web Indonesia</td>  <td>Yes</td> </tr>
<tr> <td>Kolaborasi dengan Adsense</td> <td>Hight risk</td> </tr>
</tbody> </table>

#2. Sesuaikan tabel dengan deskripsi sobat > lalu klik pratinjau untuk melihat hasilnya. Jika dirasa sudah benar pilih publikasikan.
#3. Selesai.

Saran dari aku : Terlebih dahulu, kalau mau buat artikel yang ada tabelnya, hal pertama yang perlu dibuat yaitu tabelnya dulu, bukan isi teks artikelnya. Takutnya nanti, sobat kebingungan saat mengcopy kode tabelnya kedalam mode html.

 Demo

Bagaimana keren gak? hehehe. Btw, sobat masih bisa merubah tampilan warna baris dan kolom tabelnya dengan menyesuaikan script css warna (color:#768187), ganti saja css kode warnanya dengan sesuai selera yang diminati. Mudah bukan? hehehe. Kalau sobat pengen buat tabel jenis lain, coba klik link biru ini deh, mana tau sobat tertarik buat tabel jenis lain. Mungkin itu aja sih dari aku. Terima kasih.

Mas Galih

• Share
• Share

Dapatkan Tips Menarik Setiap Harinya!

• Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
• Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
• Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense