Tabel merupakan susunan data dalam baris & kolom, atau mungkin dalam struktur yang lebih detail. Tabel umumnya banyak dipakai 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, biar tabel terlihat rapi dan nyaman di lihat sang pengunjung tentu kita harus memodifikasinya dengan pertolongan CSS. Nah kalau kau ingin memodifikasi tabel di blog menyerupai tabel di Blog aku ini, Kamu dapat ikuti langkah-langkah berikut:
Membuat Tabel Didalam Postingan
Login Ke dasbor blogger dan buat edit HTML. Tambahkan isyarat CSS berikut sempurna 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 menciptakan tabel didalam postingan blog silakan tambahkan isyarat html berikut pada mode HTML (bukan compose).
<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 kau dapat lihat review-nya disini.
Demikian Cara Membuat Tabel Didalam Postingan Blog pada kesempatan kali ini, moga bermanfaat.