Cara Membuat Tabel Responsive Di Blogger

Tutorial Membuat Tabel Keterangan Responsive Di Dalam Postingan Blog

Tutorial Cara Memasang / membuat agar tabel keterangan responsive di dalam postingan blog, pada postingan kali ini saya kan memberikan table atau kotak keterangan yang responsive untuk di pasang pada postingan blog...

Bagi agan blogger yang suka atau ingin membuat tabel / kotak keterangan untuk memisahkan, mengelompokan bagian tertentu pada sebuah text dengan tampilan yang suport untuk semua device seperti hp, tablet, laptop, notebook dan yang lainnya...

... agar tampilan tabel tersebut tidak melebihi ukuran layar maka kita harus membuatnya menjadi responsive, mobile friendly agar enak di pandang dan di bacanya....

Sebelumnya saya juga sudah pernah posting artikel tentang cara membuat tabel keterangan yang responsive dengan tampilan yang bagus dan berwarna.... Bagi kalian yang ingin mencobanya, silahkan kunjungi artikel berikut ini.....
Membuat Beautiful Table Responsive With CSS

Untuk tutorial cara membuat kotak tabel keterangan responsive ini, kita menambahkan javascript agar nanti dapat mengelompokan kata dengan keterangan.....

Barang kali kalian ingin melihat tampilannya terlebih dahulu, silahkan kunjungi link demo table berikut ini....

Demo Tabel Responsive

Sekarang kita masuk ke tutorial cara pemasangan tabel responsive di blognya...

Cara Membuat Kotak Tabel Responsive Di Postingan Blog

• Login ke blogger.com

• Pilih Template, Edit Html, Cari Kode </head>

• Lalu masukan css berikut di atasnya...

<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>

• Masih di Edit Html, sekarang kita cari kode </body>

• Lalu masukan javascript berikut diatasnya.....

<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>

• Sekarang Tinggal Save Template.
  Selanjutnya kita akan memasang html tabelnya di postingan blog...

• Silahkan masuk ke postingan yang akan di kasih tabel...

• Lalu masuk ke tab html, jangan compose lihat gambar dibawah ini...

• Kalo sudah, kalian masukan HTML tabel dibawah ini kedalamnya...

<table id="table-two-axis" class="two-axis bt">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Height</th>
        <th>Province</th>
        <th>Sport</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-th="Name"><span class="bt-content">Teja Sukmana</span></td>
        <td data-th="Age"><span class="bt-content">18</span></td>
        <td data-th="Gender"><span class="bt-content">Male</span></td>
        <td data-th="Height"><span class="bt-content">180</span></td>
        <td data-th="Province"><span class="bt-content">Garut Indonesia</span></td>
        <td data-th="Sport"><span class="bt-content">Coli Enak</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">John Stone</span></td>
        <td data-th="Age"><span class="bt-content">30</span></td>
        <td data-th="Gender"><span class="bt-content">Male</span></td>
        <td data-th="Height"><span class="bt-content">5'9</span></td>
        <td data-th="Province"><span class="bt-content">Ontario</span></td>
        <td data-th="Sport"><span class="bt-content">Badminton</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">Jane Strip</span></td>
        <td data-th="Age"><span class="bt-content">29</span></td>
        <td data-th="Gender"><span class="bt-content">Female</span></td>
        <td data-th="Height"><span class="bt-content">5'6</span></td>
        <td data-th="Province"><span class="bt-content">Manitoba</span></td>
        <td data-th="Sport"><span class="bt-content">Hockey</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">Gary Mountain</span></td>
        <td data-th="Age"><span class="bt-content">21</span></td>
        <td data-th="Gender"><span class="bt-content">Mail</span></td>
        <td data-th="Height"><span class="bt-content">5'8</span></td>
        <td data-th="Province"><span class="bt-content">Alberta</span></td>
        <td data-th="Sport"><span class="bt-content">Curling</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">James Camera</span></td>
        <td data-th="Age"><span class="bt-content">31</span></td>
        <td data-th="Gender"><span class="bt-content">Male</span></td>
        <td data-th="Height"><span class="bt-content">6'1</span></td>
        <td data-th="Province"><span class="bt-content">British Columbia</span></td>
        <td data-th="Sport"><span class="bt-content">Hiking</span></td>
      </tr>
    </tbody>
  </table>

Yang perlu kalian ganti / sesuaikan adalah tulisan seperti...
Name, Age, Gender, Height, Province, Sport.
Dan
Teja Sukmana, 18, Male, 180, Garut Indonesia, Coli Enak.

Kalian bisa menambah / mengurangi tabel itu dengan cara...
Menambahkan kotak Judul pada tabel... Cari Kode Seperti berikut.


<thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Height</th>
        <th>Province</th>
        <th>Sport</th>
      </tr>
</thead>


Lalu tambahkan <th>Namanya</th> di bawah <tr> atau di atas </tr>

Sekarang menambahkan keterangannya.. cari kode tabel seperti berikut..<tbody> atau </tbody>

Lalu tambahkan kode berikut di bawah <tbody> atau di atas </tbody>. Sesuaikan saja dengan judul tadi...


      <tr>
        <td data-th="Name"><span class="bt-content">Teja Sukmana</span></td>
        <td data-th="Age"><span class="bt-content">18</span></td>
        <td data-th="Gender"><span class="bt-content">Male</span></td>
        <td data-th="Height"><span class="bt-content">180</span></td>
        <td data-th="Province"><span class="bt-content">Garut Indonesia</span></td>
        <td data-th="Sport"><span class="bt-content">Coli Enak</span></td>
      </tr>

• Kalo sudah, tinggal di publikasikan dan selesai deh...

Cukup sekian dan terima kasih sudah membaca artikel dari blog mas tamvan tentang cara membuat tabel responsive di postingan blog ini semoga bermanfaat..
Apa bila ada yang tidak di mengerti silahkan bertanya di kolom komentar...