Cara Membuat Tabel Responsive Di Dalam Postingan Blog - Jejakdzgn

Cara Membuat Tabel Responsive Di Dalam Postingan Blog

Jejakdzgn.my.id - Hello sobat blogger, kembali lagi dengan saya. Pada kesempatan kali ini saya akan membagikan sebuah tutorial Cara Membuat Tabel Responsive Di Dalam Postingan Blog.

cara-membuat-tabel-responsive.

Seperti yang kita ketahui, bahwa fungsi dari tabel ini sangat berguna untuk kita, tabel sendiri dapat membantu kita dalam mengelompokkan kategori tertentu ke dalam kolom tabel.

Namun, perlu anda ketahui bahwa tidak semua tabel memiliki responsive, seperti yang kita ketahui bahwa tabel responsive merupakan tabel yang tidak membuat loading blog anda menjadi lambat.

Untuk itu, saya ingin membagikan Cara Membuat Tabel Responsive Di Dalam Postingan Blog, yang tentunya tabel yang saya bagikan ini merupakan tabel responsive jadi tidak akan membuat loading blog anda menjadi lambat.

Untuk membuat nya pun sangat mudah, anda tinggal mengikuti tahap dibawah ini untuk membuat nya.

 Cara Membuat Tabel Responsive Di Blog

Langkah 1 : Masuk ke akun blogger anda.

Langkah 2 : Klik TEMA > Edit HTML.

Langkah 3 : masukan kode dibawah ini tepat diatas kode </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:left9;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:left9;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>

Langkah 4 : masukan kode dibawah ini tepat diatas kode </body>

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

Langkah 5 : Simpan

Memasang Tabel Di Dalam Postingan Blog

Langkah 1 : masuk ke postingan anda

Langkah 2 : Ubah Compose menjadi HTML

Langkah 3 : Masukan kode dibawah ini, kedalam postingan (HTML)

<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">Muhammad Arif Pudin</span></td>
<td data-th="Umur"><span class="bt-content">23</span></td>
<td data-th="Tempat Lahir"><span class="bt-content">Jakarta</span></td>
<td data-th="Tinggi Badan"><span class="bt-content">180</span></td>
<td data-th="Berat Badan"><span class="bt-content">49</span></td>
</tr>
</tbody>
</table>

PENTING : Silahkan ganti Menu dan SubMenu sesuai dengan keinginan kalian !

Akhir Kata :

Jika anda masih kebingungan dalam menerapkan nya, anda bisa memberi komentar dibawah ini.

Semoga artikel yang saya bahas diatas tersebut, dapat memberi manfaat untuk anda semua.
Show Comments
Hide Comments

Belum ada Komentar untuk "Cara Membuat Tabel Responsive Di Dalam Postingan Blog"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel