Cara Menciptakan Tabel Responsive Di Blogger

Tutorial Membuat Tabel Keterangan Responsive Di Dalam Postingan Blog

Tutorial Cara Memasang / menciptakan semoga tabel keterangan responsive di dalam postingan blog, pada postingan kali ini aku kan menawarkan 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 bab tertentu pada sebuah text dengan tampilan yang suport untuk semua device ibarat hp, tablet, laptop, notebook dan yang lainnya...

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

Sebelumnya aku juga sudah pernah posting artikel perihal cara menciptakan tabel keterangan yang responsive dengan tampilan yang cantik dan berwarna.... Bagi kalian yang ingin mencobanya, silahkan kunjungi artikel berikut ini.....
Membuat Beautiful Table Responsive With CSS

Untuk tutorial cara menciptakan kotak tabel keterangan responsive ini, kita menambahkan javascript semoga nanti sanggup 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, kini kita cari arahan </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 yaitu goresan pena seperti...
Name, Age, Gender, Height, Province, Sport.
Dan
Teja Sukmana, 18, Male, 180, Garut Indonesia, Coli Enak.

Kalian sanggup 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 arahan tabel ibarat berikut..<tbody> atau </tbody>

Lalu tambahkan arahan 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 final deh...

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