Cara membuat tabel keren di blogger

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.

Comments

Post a Comment

Popular posts from this blog

cara membuat halaman partner keren untuk bertukar backlink

Lomba tulis artikel rumahweb terbaru berhadiah jutaan rupiah

Blog competition dengan tema pengalaman pribadiku dalam menumbuhkan minat baca anak