Cara Mudah Membuat Flat Table Responsive Pada Postingan Blogspot
Tutorial.web.id – Cara Sederhana Membuat Flat Table yang Responsive Pada Template Blogger dan Postingan Blogspot.
Bagi blogger pemula pasti mengalami kendala dan kesulitan saat membuat table, terlebih lagi bahwa table sangat sulit untuk dibikin responsive. Untuk mengakalinya agar menjadi responsive, kita bisa memanfaatkan query media dan overflow.
Kenyataannya table bisa sangat luas. Sederet data row bisa bersama sama untuk masuk ke dalam sebuah table. Table dengan lebar atau width 100%, bisa dikecilkan dan dibesarkan tetapi ketika layar di kecilkan row table akan terlihat sempit dan mungkin teks akan bertumpuk tumpuk. Inilah sebabnya kenapa table sulit dibuat responsive.
Desain responsif adalah tentang bagaimana kita menyesuaikan desain dengan layar yang memiliki ukuran berbeda. Jadi disini ketika website dibuka pada layar yang lebih sempit semisal ponsel, maka table akan tetap terlihat lebih lebar dan kita bisa menggeser table ke arah samping. Sehingga layout design responsive tidak rusak dan kita bisa membaca table dengan lebih mudah.
Lalu apakah cara ini bisa diterapkan pada blogger? Bisa. Disini saya akan memandu anda dalam membuat table yang responsive dengan warna metro dan desain flat tanpa border.
langkah cara membuat flat table responsive pada blogspot:
1. Backup terlebih dahulu template blog sobat agar aman, bisa dilihat pada tutorial Cara Mudah Backup Template Blogger atau Blogspot Bagi Pemula.2. Kemudian masuk menu edit template, jika belum paham bisa langsung lihat Cara Mudah Edit Template Blogspot Bagi Pemula.
3. Selanjutnya masukkan responsive meta tag berikut sebelum kode <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> /* flat table responsip */
table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}
table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#43ce8e;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
.table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
.table-responsive > .table {margin-bottom: 0;}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
.table-responsive > .table-bordered {border: 0;}
}Untuk mengganti warna BG pada table, silakan edit kode css background-color:#43ce8e
5. Berikut adalah contoh penggunakan flat responsive table pada HTML atau postingan anda. Perlu diingat jika ingin dimasukkan pada template blogger maka gunakan single quote(') dan jika ingin dimasukkan pada postingan gunakan double quote("), berikut adalah kodenya:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama Pertama</th>
<th>Nama Terakhir</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tutorial</td>
<td>web.id</td>
</tr>
<tr>
<td>Blogger</td>
<td>Indonesia</td>
</tr>
<tr>
<td>Herry</td>
<td>Ganteng</td>
</tr>
</tbody>
</table>
</div>| Nama Pertama | Nama Terakhir |
|---|---|
| Tutorial | web.id |
| Blogger | Indonesia |
| Herry | Ganteng |
Sekian cara mudah membuat tabel responsive pada blogger atau blogspot. Sangat mudah bukan? Silakan di share.
Source code : http://www.gianmr.com/2016/02/cara-membuat-flat-table-responsive-di-blogger-atau-blogspot.html
0 Response to "Cara Mudah Membuat Flat Table Responsive Pada Postingan Blogspot"
Posting Komentar
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini.
1. Komentar dengan menambahkan link akan dihapus.
2. Hubungi kami melalui halaman contact.