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

Membuat Search Box Popup Full Screen Responsive

Pure css Search Box Pop Up Reesponsive Cara Membuat Kotak Pencarian di blog menjadi pop up full screen responsive . Tutorial kali ini saya akan berbagi cara untuk mendesain tampilan search box menjadi popup .. Bagi kalian yang ingin mengganti kolom pencarian blog kalian dengan tampilan yang berbeda, bisa mencoba search box yang akan di share pada tutorial ini. Jangan lupa untuk membaca artikel lainnya yang sudah di share di blog mas tamvan ini ya gan :) Tutorial Blogger Lainnya : Cara Praktis Membuat Tabel Di Postingan Blog Dengan Tool Memasang Hover Share Button Image Di blogger TS Grid - Template Blogger Responsive Dan Valid HTML5 Buat kalian yang igin melihat tampilannya, bisa kunjungi link berikut.. Demo Search Box Pop Up Lanjut saja kita ke tahap pemasangan search box popup responsive pure css ini ya gan :3 Pure CSS PopUp Search Box Responsive Seperti biasa, login terlebih dahulu ke blogger.com Sete...
Post a Comment
Read more

Membuat Menu Bar Drop Down Responsive

Tutorial Cara Memasang Menu Navigation Bar Deopdown Responsive Di Blog Memasang Menu kafetaria Responsive Di Blog , Tutorial kali ini kita akan membuat menu navigation bar drop down responsive pada blogger.. Sebelumnya saya juga sudah pernah posting tentang menu bar, kalian bisa memilih pada artikel berikut ini, barang kalia ada yang menarik.. Tutorial Blogger Lainnya : Cara Membuat Vertical Mega Menu Multi Level Di Blog Membuat Menu Bar Drop Down Responsive Tanpa Edit HTML Simple Menu Navigation Drop Down Effect With Css nah sekarang mari kita lanjut ke tutorial cara pemasangan menu navigation bar drop down yang responsive di blog.. Tutorial Membuat Menu Bar Drop Down Responsive Login ke blogger.com Pilih menu Template , Edit HTML , Cari Kode </head> Setelah ketemu, masukan css berikut di atasnya... <style type="text/css"> .slide-hidangandisplay:none;background:#3a89b9;padding:0 ...
Post a Comment
Read more