Cara Membuat Tabel Responsif Di Postingan Blog

cara membuat tabel responsif di blog


Untuk Para Blogger memang fungsi dari pada tabel sendiri agak sedikit berguna karena dengan adanya tabel ini bisa memudahkan para blogger untuk mengelompokkan kategori tertentu yang dimasukkan kedalam kolom tabel.

Namun, Tidak semua tabel masuk kedalam kategori Mobile Friendly atau Responsive, Yang bisa atau cocok untuk semua perangkat dan tentunya ringan tanpa membuat loading diblog kalian lambat.


Kali ini PutarMuter punya solosinya, Saya membagikan Tabel Responsive yang bisa kalian praktekkan sendiri diblog kalian. Disini ada tiga komponen yang nanti perlu kalian tuangkan yaitu Css, Javascript, dan Html. 

Oke langsung saja kita simak dan silahkan praktekkan sendiri diblog kalian.



Membuat Tabel Responsive Di Blog


  • Masuk ke halaman Blogger kalian
  • Kemudian masuk ke Tema > Edit HTML
  • Kemudian masukkan kode Css di bawah ini Tepat diatas </head>

<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>
  • Kemudian kita Beralih Ke Javascript, Lalu cari kode </body>
  • Lalu masukkan kode dibawah ini tepat diatas nya.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("#table").basictable(),$("#table-two-axis").basictable()});
!function(t){t.fn.basictable=function(a){var e=function(a,e){var i=[];e.tableWrap&&a.wrap('<div class="bt-wrapper"></div>');var s="";s=a.find("thead tr th").length?"thead th":a.find("tbody tr th").length?"tbody tr th":a.find("th").length?"tr:first th":"tr:first td",t.each(a.find(s),function(){var a=t(this),e=parseInt(a.attr("colspan"),10)||1,n=a.closest("tr").index();i[n]||(i[n]=[]);for(var s=0;e>s;s++)i[n].push(a)}),t.each(a.find("tbody tr"),function(){n(t(this),i,e)}),t.each(a.find("tfoot tr"),function(){n(t(this),i,e)})},n=function(a,e,n){a.children().each(function(){var a=t(this);if(""!==a.html()&&"&nbsp;"!==a.html()||n.showEmptyCells){for(var i=a.index(),s="",r=0;r<e.length;r++){0!=r&&(s+=": ");var o=e[r][i];s+=o.text()}a.attr("data-th",s),n.contentWrap&&!a.children().hasClass("bt-content")&&a.wrapInner('<span class="bt-content" />')}else a.addClass("bt-hide")})},i=function(a){t.each(a.find("td"),function(){var a=t(this),e=a.children(".bt-content").html();a.html(e)})},s=function(a,e){e.forceResponsive?t(window).width()<=e.breakpoint?r(a,e):o(a,e):a.removeClass("bt").outerWidth()>a.parent().width()?r(a,e):o(a,e)},r=function(t,a){t.addClass("bt"),a.tableWrap&&t.parent(".bt-wrapper").addClass("active")},o=function(t,a){t.removeClass("bt"),a.tableWrap&&t.parent(".bt-wrapper").removeClass("active")},c=function(t,a){t.find("td").removeAttr("data-th"),a.tableWrap&&t.unwrap(),a.contentWrap&&i(t),t.removeData("basictable")},b=function(t){t.data("basictable")&&s(t,t.data("basictable"))};this.each(function(){var n=t(this);if(0===n.length||n.data("basictable"))return n.data("basictable")&&("destroy"==a?c(n,n.data("basictable")):"start"===a?r(n,n.data("basictable")):"stop"===a?o(n,n.data("basictable")):s(n,n.data("basictable"))),!1;var i=t.extend({},t.fn.basictable.defaults,a),l={breakpoint:i.breakpoint,contentWrap:i.contentWrap,forceResponsive:i.forceResponsive,noResize:i.noResize,tableWrap:i.tableWrap,showEmptyCells:i.showEmptyCells};n.data("basictable",l),e(n,n.data("basictable")),l.noResize||(s(n,n.data("basictable")),t(window).bind("resize.basictable",function(){b(n)}))})},t.fn.basictable.defaults={breakpoint:568,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1}}(jQuery);
//]]>
</script>
  • Selanjutnya adalah klik Simpan Template, Kemudian kita akan beralih ke HTML

Memasang Tabel dalam Postingan Blog

  • Masuk ke postingan kalian yang ingin di tambah tabel
  • Kemudian masuk dikolom HTML (jangan compose)
  • Setelah itu, Masukkan kode Html dibawah ini

<table class="two-axis bt" id="table-two-axis">
    <thead>
<tr>
        <th>Name</th>
        <th>Umur</th>
        <th>Tempat Lahir</th>
        <th>Tinggi Badan</th>
        <th>Berat Badan</th>
      </tr>
</thead>
    <tbody>
<tr>
        <td data-th="Name"><span class="bt-content">Sukadi</span></td>
        <td data-th="Umur"><span class="bt-content">45</span></td>
        <td data-th="Tempat Lahir"><span class="bt-content">Pekalongan</span></td>
        <td data-th="Tinggi Badan"><span class="bt-content">180</span></td>
        <td data-th="Berat Badan"><span class="bt-content">56</span></td>
      </tr>
<tr>
        <td data-th="Name"><span class="bt-content">Tono</span></td>
        <td data-th="Umur"><span class="bt-content">32</span></td>
        <td data-th="Tempat Lahir"><span class="bt-content">Cilacap</span></td>
        <td data-th="Tinggi Badan"><span class="bt-content">175</span></td>
        <td data-th="Berat Badan"><span class="bt-content">64</span></td>
      </tr>
<tr>
        <td data-th="Name"><span class="bt-content">Sugianto</span></td>
        <td data-th="Umur"><span class="bt-content">59</span></td>
        <td data-th="Tempat Lahir"><span class="bt-content">Lamongan</span></td>
        <td data-th="Tinggi Badan"><span class="bt-content">176</span></td>
        <td data-th="Berat Badan"><span class="bt-content">61</span></td>
      </tr>
</tbody>
  </table>

Note : Jika ingin mengganti Menu dan Submenu Tabel di atas kalian tinggal, Mengganti Warna Oren diatas dengan Menu yang ingin kalian cantumkan, dan jika ingin mengganti daftar atau submenu diatas tinggal, Ganti warna Kuning dengan Daftar submenu yang ingin kalian ganti.

Nah jika semua tahap-tahap diatas kalian pahami dan terapkan dengan benar, maka hasil dari pada Tabel Responsive sudah selesai, Hasilnya akan seperti dibawah ini..

Kesimpulan

Bagaimana? Keren bukan, Tahap diatas bisa kalian coba di website kalian masing-masing. Selamat Mencoba

Sekian yang bisa saya berikan dalam artikel Tutorial Blogging kali ini. Semoga tutorial blogger diatas bisa bermanfaat untuk kalian, Terimakasih [putarmuter].

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel