Lalu bagaimana cara membuat tabel responsive di blogspot?
Yuk, simak terus artikel berikut ini tentang tutorial cara membuat tabel responsive di Blogger.
Tutorial Cara Membuat Tabel Responsive di Blog
1. Pertama, login ke Blogger.2. Pilih menu Theme > Edit HTML, cari kode </head>.
3. Lalu letakkan kode css berikut diatasnya.
<style type='text/css'>
/*<![CDATA[*/
*{margin:0;padding:0;}
table{background:white;border-collapse:collapse;margin:1.25em 0 0;width:100%;}
table tr,table th,table td{border:none;border-bottom:1px solid #e4ebeb;font-family:'Lato',sans-serif;font-size:.875rem;}
table th,table td{padding:10px 12px;text-align:left;}
table th{background:#56a2cf;color:#ffffff;text-transform:uppercase;}
table tr td{background:#eaf3f5;color:#999999;}
table tr:nth-of-type(2n+2) td{background:#ffffff;}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{font-size:.8125rem;padding:0;}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before{background:#56a2cf;color:white;margin-right:10px;padding:2px 10px;}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{display:inline-block;padding:2px 5px;}
table.bt tfoot th:first-of-type:before,table.bt tfoot th:first-of-type .bt-content,table.bt tfoot td:first-of-type:before,table.bt tfoot td:first-of-type .bt-content,table.bt tbody td:first-of-type:before,table.bt tbody td:first-of-type .bt-content{padding-top:10px;}
table.bt tfoot th:last-of-type:before,table.bt tfoot th:last-of-type .bt-content,table.bt tfoot td:last-of-type:before,table.bt tfoot td:last-of-type .bt-content,table.bt tbody td:last-of-type:before,table.bt tbody td:last-of-type .bt-content{padding-bottom:10px;}
@media only screen and (max-width:568px){#table-no-resize thead{display:none;}#table-no-resize tbody td{border:none!important;display:block;font-size:.8125rem;padding:0;vertical-align:top;/* IE 9 */ float:left\9;width:100%\9;}#table-no-resize tbody td:before{background:#56a2cf;content:attr(data-th) ":";color:white;display:inline-block;font-weight:bold;margin-right:10px;padding:2px 10px;width:6.5em;}#table-no-resize tbody td .bt-content{display:inline-block;padding:2px 5px;}#table-no-resize tbody td:first-of-type:before,#table-no-resize tbody td:first-of-type .bt-content{padding-top:10px;}#table-no-resize tbody td:last-of-type:before,#table-no-resize tbody td:last-of-type .bt-content{padding-bottom:10px;}}
table.two-axis tr td:first-of-type{background:#cadde1;}
@media only screen and (max-width:568px){table.two-axis tr td:first-of-type,table.two-axis tr:nth-of-type(2n+2) td:first-of-type,table.two-axis tr td:first-of-type:before{background:#3584b3;color:#ffffff;}table.two-axis tr td:first-of-type{border-bottom:1px solid #e4ebeb;}table.two-axis tr td:first-of-type:before{padding-bottom:10px;}}
.bt-wrapper.active{margin-top:1.5em;}
.bt-wrapper.active table{margin:0;}
table{width:100%;}
.table{margin:30px 0;border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #e0e0e0;}
.table caption{color:#333;font-style:italic;font-size:85%;line-height:1;padding:1em 0;text-align:center;}
.table td,.table th{border-left:1px solid #e0e0e0;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:0.5em 1em;font-weight:normal;}
.table td:first-child,.table th:first-child{border-left-width:0;}
.table thead,.table tfoot{background-color:#f05050;color:#fff;text-align:left;vertical-align:bottom;}
.table thead td,.table tfoot td,.table thead th,.table tfoot th{border-color:#fff;}
.table td{background-color:transparent;}
.table_striped tr:nth-child(2n-1) td{background-color:#ececec;}
.table_bordered td{border-bottom:1px solid #e0e0e0;}
.table_bordered tbody > tr:last-child > td,.table_bordered thead > tr:last-child > td{border-bottom-width:0;}
.table_horizontal td,.table_horizontal th{border-width:0 0 1px 0;border-bottom:1px solid #e0e0e0;}
.table_horizontal tbody > tr:last-child > td,.table_horizontal thead > tr:last-child > td{border-bottom-width:0;}
table.bt thead,table.bt tbody th{display:none;}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{border:none;display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;vertical-align:top;
float:left\9;width:100%\9;}
table.bt tfoot th::before,table.bt tfoot td::before,table.bt tbody td::before{content:attr(data-th) ":";display:inline-block;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;font-weight:bold;width:6.5em;}
table.bt tfoot th.bt-hide,table.bt tfoot td.bt-hide,table.bt tbody td.bt-hide{display:none;}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{vertical-align:top;}
.bt-wrapper.active{max-height:310px;overflow:auto;-webkit-overflow-scrolling:touch;}
/*]]>*/
</style>
4. Setelah itu Save.
Selanjutnya kita akan memasang HTML tabelnya dipostingan blog.
~ Silakan masuk ke postingan yang akan di pasang tabel.
~ Masuk ke tab HTML, bukan Compose.
~ Masukan kode HTML berikut ke dalam postingan.
<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>Rp. 1.000.000</td>
</tr>
<tr>
<td>HP</td>
<td>Rp. 500.000</td>
</tr>
<tr>
<td>Mouse</td>
<td>Rp. 25.000</td>
</tr>
</tbody>
</table>
~ Jika sudah, klik Publish.
Untuk Keterangan Nama dan Harga bisa disesuaikan dengan keperluan Anda.
Demikian artikel tentang Cara Membuat Tabel Responsive di Blogspot, semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.