Sederhana! Cara Membuat Tabel Didalam Postingan Blog

Kode CSS membuat tabel diblog

Tabel merupakan susunan data dalam baris & kolom, atau mungkin dalam struktur yang lebih detail. Tabel umumnya banyak digunakan dalam komunikasi, penelitian, dan analisis data. Tabel sering muncul di media cetak, tulisan, perangkat lunak komputer, arsitektur hiasan, dan lain-lain, termasuk salah satunya di dalam postingan blog atau website.

Tabel juga sering di gunakan di blog maupun website yang isi artikelnya berisi daftar suatu susunan data, agar tabel terlihat rapi dan nyaman di lihat sang pengunjung tentu kita harus memodifikasinya dengan bantuan CSS. Nah jika kamu ingin memodifikasi tabel di blog seperti tabel di Blog saya ini, Kamu bisa ikuti langkah-langkah berikut:

Membuat Tabel Didalam Postingan


Login Ke dasbor blogger dan buat edit HTML. Tambahkan kode CSS berikut tepat di atas </style> yang pertama.

/* Post Tabel */
.post-body table{width:100%}
.post-body table td,.post-body table caption{background:#fff;border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}
.post-body table th{background:#0591bc;color:#fff;border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container{background:#fff;border:1px solid #e9e9e9;margin:0}
.post-body th{font-weight:700}
.post-body table caption{border:0;font-style:italic}
.post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #97b28e}
.post-body th:hover{background:#d2d2d2}
.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:#444}
.post-body td a:hover{color:#cf4d35}
.post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000}
.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}
.post-body li{list-style-type:circle}
.post-body td.tr-caption{font-size:85%;padding:10px !important}

Simpan dulu CSS diatas.

Untuk membuat tabel didalam postingan blog silakan tambahkan kode html berikut pada mode HTML (bukan compose).

Cara Membuat Tabel Didalam Postingan Mode HTML

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Type</th> <th>Persentasi</th><th>Unit</th> </tr>
<tr> <td>Samsung</td> <td>25.5 %</td> <td>2.3 Juta</td></tr>
<tr> <td>Xiaomi</td> <td>18.3 %</td><td>1.7 Juta</td> </tr>
<tr> <td>Oppo</td> <td>16.8 %</td><td>1.5 Juta</td>  </tr>
<tr> <td>Vivo</td> <td>6.5 %</td><td>600.000</td>  </tr>
<tr> <td>Smartfren</td> <td>5.6 %</td><td>520.000</td>  </tr>
</tbody> </table>

Coba pratinjau untuk memastikan tabel telah tersusun rapi. Untuk tabel di atas kamu bisa lihat review-nya disini.

Demikian Cara Membuat Tabel Didalam Postingan Blog pada kesempatan kali ini, moga bermanfaat.
Advertisement
Advertisement

Diam lebih baik dari pada berdebat dengan orang‐orang bodoh.