MASIGNALPHA101

Cara membuat tabel keren di blogger

Cara membuat tabel keren di blogger
Thursday, April 30, 2020
Tabel


Cara membuat tabel keren di blogger

Halo sobat blogmania, kembali lagi blogmania kali ini akan berbagi tutorial cara membuat tampilan tabel yang keren pada blog.

Tabel ini biasanya digunakan untuk untuk menamilkan data - data dalam bentuk tabel seperti, nama dan nomor, keterangan, layanan dan lainnya.

Nah, untuk membut tampilan tabel yang keren pada template blogspot. Silahkan masuk ke tema, lalu pilih edit html, dan cari kode </style> atau </b:skin>, lalu paste script di bawah ini, tepat di atas kode </b:skin> tadi.

/* Tabel Blogger Responsive */
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:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.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%}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
table tr:nth-child(odd):hover td {background:#b0b1b4;}


Jika sudah, silahkan di simpan. Dan jika ingin menampilkan hasilnnya, silahkan klik entri baru>edit html> paste script di bawah ini.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Keterangan</th> </tr>
<tr><td>Nama1</td><td>Nilai1</td> </tr>
<tr><td>Nama2</td><td>Nilai2</td> </tr>
<tr><td>Nama3</td><td>Nilai3</td> </tr>
<tr><td>Nama4</td><td>Nilai4</td> </tr>
</tbody> </table>


Nah, jika kamu ingin menampilkan tabel di halaman artikel kamu, kamu juga cukup memangil dengan <tabel> seperti di atas.

avatar

Mantappp gann sangatt membantu..

Kunjungi website kami gann.
hargabetonmurah.com

April 30, 2020 at 2:08 AM
This comment has been removed by the author.
avatar

temukan Segala Resep Masakan disini

April 30, 2020 at 2:32 AM