Cara Menciptakan Tabel Keren Di Postingan Blog
Tabel di blog memang memudahkan para pengunjung blog untuk membaca data. Biasanya tabel di blog dipakai untuk menampilkan spesifikasi data, value data, dan data lainnya. Kaprikornus meja memainkan tugas yang tidak dapat dianggap enteng. Untuk hal berikut aku membuatkan langkah-langkah menciptakan tabel keren di posting blog:
- Masuk ke dashboard blog
- Pilih sajian template dan pilih html
- Cari arahan ]]></b:skin> cara Ctrl + F
- Copy script di bawah letak di atas ]]></b:skin>
/* CSS Post Table */ .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .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;} .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 th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .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 {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} 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;}
- Simpan template
- Masuk sajian Post dan Copy script di bawah ini pada postingan, paste script tersebut
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr> <th>Tujuan</th> <th>Hari</th> </tr> <tr> <td>Bengkulu</td> <td>Senin</td> </tr> <tr> <td>Bandung</td> <td>Selasa</td> </tr> <tr> <td>Jakarta</td> <td>Rabu</td> </tr> <tr> <td>Surabaya</td> <td>Kamis</td> </tr> <tr> <td>Lampung</td> <td>Jumat</td> </tr> </tbody> </table>
- Edit sedemikian dengan keputusan anda
- Selesai