Skip to main content

Cara Membuat Tabel Responsive Di Blogger

cara-membuat-tabel-responsive-di-blogger

Tutorial Membuat Tabel Keterangan Responsive Di Dalam Postingan Blog

Tutorial Cara Memasang / membuat semoga 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 menciptakan 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 menciptakan tabel keterangan yang responsive dengan tampilan yang anggun 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


  • Pilih Template, Edit Html, Cari Kode </head>
  • Lalu masukan css berikut di atasnya...
    •  <style type='text/css'> /*<![CDATA[*/ *margin:0;padding:0; tablebackground:white;border-collapse:collapse;margin:1.25em 0 0;width:100%; table tr,table th,table tdborder:none;border-bottom:1px solid #e4ebeb;font-family:'Lato',sans-serif;font-size:.875rem; table th,table tdpadding:10px 12px;text-align:left; table thbackground:#56a2cf;color:#ffffff;text-transform:uppercase; table tr tdbackground:#eaf3f5;color:#999999; table tr:nth-of-type(2n+2) tdbackground:#ffffff; table.bt tfoot th,table.bt tfoot td,table.bt tbody tdfont-size:.8125rem;padding:0; table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:beforebackground:#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-contentdisplay: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-contentpadding-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-contentpadding-bottom:10px; @media only screen and (max-width:568px)#table-no-resize theaddisplay:none;#table-no-resize tbody tdborder: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:beforebackground:#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-contentdisplay:inline-block;padding:2px 5px;#table-no-resize tbody td:first-of-type:before,#table-no-resize tbody td:first-of-type .bt-contentpadding-top:10px;#table-no-resize tbody td:last-of-type:before,#table-no-resize tbody td:last-of-type .bt-contentpadding-bottom:10px; table.two-axis tr td:first-of-typebackground:#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:beforebackground:#3584b3;color:#ffffff;table.two-axis tr td:first-of-typeborder-bottom:1px solid #e4ebeb;table.two-axis tr td:first-of-type:beforepadding-bottom:10px; .bt-wrapper.activemargin-top:1.5em; .bt-wrapper.active tablemargin:0; tablewidth:100%; .tablemargin:30px 0;border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #e0e0e0; .table captioncolor:#333;font-style:italic;font-size:85%;line-height:1;padding:1em 0;text-align:center; .table td,.table thborder-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-childborder-left-width:0; .table thead,.table tfootbackground-color:#f05050;color:#fff;text-align:left;vertical-align:bottom; .table thead td,.table tfoot td,.table thead th,.table tfoot thborder-color:#fff; .table tdbackground-color:transparent; .table_striped tr:nth-child(2n-1) tdbackground-color:#ececec; .table_bordered tdborder-bottom:1px solid #e0e0e0; .table_bordered tbody > tr:last-child > td,.table_bordered thead > tr:last-child > tdborder-bottom-width:0; .table_horizontal td,.table_horizontal thborder-width:0 0 1px 0;border-bottom:1px solid #e0e0e0; .table_horizontal tbody > tr:last-child > td,.table_horizontal thead > tr:last-child > tdborder-bottom-width:0; table.bt thead,table.bt tbody thdisplay:none; table.bt tfoot th,table.bt tfoot td,table.bt tbody tdborder: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::beforecontent: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-hidedisplay:none; table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-contentvertical-align:top; .bt-wrapper.activemax-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()(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()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),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 akibat deh...

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

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Daftar Isi / Sitemap Di Blog

document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; var css = '#sitemap-blogpadding:7px 10px;margin:0 auto#sitemap-blog tablewidth:auto;margin:0 auto;border:none!important#sitemap-blog table tdborder:none!important;padding:0!important#sitemap-blog formfont:inherit#sitemap-blog labeldisplay:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0#sitemap-blog select[disabled]opacity:.4#post-searcherdisplay:block;margin:0;padding:0#sitemap-blog input,#sitemap-blog selectwidth:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box#sitemap-blog select optionmin-height:1.4em!important#sitemap-blog input#feed-qpadding:5px 10px!important#daftar-isi-blogbackgr...
Post a Comment
Read more

Cara Memasang Widget Recent Post By Label Di Blog

Tutorial cara membuat recent post menurut label Cara Menambahkan Widget Recent Post By Label Di Bawah Postingan Blog . Kali ini saya akan berbagi tutorial menciptakan 2 (dua) widget gres dibawah postingan blog yang akan menampilkan recent post berdasarkan label tertentu. Widget Recent Post by Label ini saya ambil dari Template Evo Magz buatan Mas Sugeng yang sangat fenomenal. Widget Recent Post by Label With Thubnial ini akan menampilkan 4 artikel terbaru ditambah dengan menampilkan Komentar , Tanggal Di Publikasikannya dan juga readmore . Kalian juga bisa mengatur berapa artikel yang akan ditampilkan. Nah, untuk memasang Widget Recent Post by Label di bawah postingan blog , bisa ikuti tutorial singkat dibawah ini... Membuat Recent Post Berdasarkan Kategori Langkah pertama, silahkan login ke akun Blogger Setelah login, masuk ke menu, Template , Edit HTML , Cari Kode </head&gt Kalo sudah ketemu, masukan script Widget Recent Post by Label With Thubnial di...
Post a Comment
Read more