Belakangan ini aneka macam blogger yang mencari cara untuk menciptakan tabel di postingan blognya. Apalagi bagi seorang blogger d0wnl0ad template gratis, alasannya ialah biasanya tabel dipakai untuk mempermudah dan memperjelas mengenai spesifikasi template tersebut. Saya juga dapat memakai tabel supaya pengunjung dapat dengan gampang mengetahui hal - hal tertentu, ibarat harga beberapa barang.
Di google memang banyak yang share cara menciptakan tabel di postingan blog, namun kebanyakan biasa saja. Kaprikornus pada kesempatan kali ini Saya ingin membagikan cara menciptakan tabel keren di postingan blog secara lengkap. Script tabel yg akan Saya bagikan sekarang, ialah script tabel yang Saya pakai di template ini (VioMagz).
Berikut cara menciptakan tabel keren pada postingan blog
1. Buka blog Anda, masuk ke Tema > Edit HTML
2. Simpan aba-aba dibawah ini sempurna diatas aba-aba </style> atau ]]></b:skin>
/* 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%}3. Klik Simpan (Save)
4. Kemudian untuk menciptakan tabel di dalam postingan, Anda buat postingan ibarat biasanya. Lalu rubah dari mode
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr> <th>BLOG</th> <th>SIDDIQRN</th> </tr> <tr> <td>Oke</td> <td>Oke</td> </tr> <tr> <td>Good</td> <td>Good</td> </tr> </tbody> </table>Maka hasil karenanya akan ibarat ini
| JUDUL | KETERANGAN |
|---|---|
| Nama | Siddiq Rasyid N |
| Website | www.siddiqrn.net |
| YouTube | youtube.com/siddiqrn |
| instagram.com/siddiqrn |
Kaprikornus itulah cara menciptakan tabel keren di postingan blog. Script tabel ini bukan milik Saya, jadi mohon gunakan dengan bijak dan jangan mengaku buatan Anda sendiri hehe. Terimakasih dan biar bermanfaat Sumber http://www.siddiqrn.net/