Membuat Tabel pada Bootstrap

Cara Menggunakan Bootstrap
Bootstrap

Membuat Tabel pada Bootstrap

Membuat Tabel pada Bootstrap. – Pada artikel sebelumnya, kita telah membahas Aturan Penulisan pada Bootstrap. Kali ini kita masih pada Tema Bootstrap, yaitu Membuat Tabel pada Bootstrap. Seperti biasa, yang kita pakai adalah class pada Bootstrap yang akan kita gunakan untuk membuat table.

Baca juga: Aturan Penulisan pada Bootstrap.

Membuat Tabel pada Bootstrap

Membuat tabel pada Bootstrap sangat mudah, hanya dengan menaggil class bawaan dari Bootstrap. Lalu kita bisa meng-kustom nya sendiri. Seperti memberi warna header gelap, bahkan membuat tabel responsive. Adapun class yang kita gunakan adalah,

  • .table > Class ini adalah class basic yang digunakan dalam Bootstrap.
  • .table-striped > Kita bisa membuat table yang tiap barisnya berbeda warna menggunakan class table-striped.
  • .table-bordered > Class ini memudahkan kita untuk memberi border pada table yang kita buat.
  • .table-hover > Memberikan efek hover (gray background) pada table kita.
  • .thead-dark > Class ini menjadikan warna header table menjadi gelap.
  • .thead-light > Ini adalah kebalikan dari thead-dark, yaitu memberi background grey pada header table.

Cara Membuat Table pada Bootstrap

Sekarang kita coba membuat table menggunakan Bootstrap. Yang pertama buat file index.html berisi kode berikut,

[html]



codelatte.org/title><br /> <meta charset="utf-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><br /> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><br /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><br /> </head><br /> <body></p> <div class="container"> <h2>Contoh Penggunaan <code>.thead-dark</code> pada Bootstrap | codelatte.org</h2> <table class="table"> <thead class="thead-dark"> <tr> <th>Nama</th> <th>Tempat Tinggal</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Andi</td> <td>Jakarta</td> <td>andi@example.com</td> </tr> <tr> <td>Susi</td> <td>Surabaya</td> <td>susi@example.com</td> </tr> <tr> <td>Gilang</td> <td>Medan</td> <td>gilang@example.com</td> </tr> </tbody> </table> </div> <p></body><br /> </html><br /> [/html]<br /> Hasilnya akan menjadi seperti ini,</p> <div id="attachment_449" style="width: 1263px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-449" loading="lazy" class="size-full wp-image-449 jetpack-lazy-image" src="https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=740%2C234&ssl=1" alt="Contoh Tabel pada Bootstrap" width="740" height="234" data-recalc-dims="1" data-lazy-srcset="https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?w=1253&ssl=1 1253w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=300%2C95&ssl=1 300w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=768%2C243&ssl=1 768w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=1024%2C324&ssl=1 1024w" data-lazy-sizes="(max-width: 740px) 100vw, 740px" data-lazy-src="https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=740%2C234&is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img aria-describedby="caption-attachment-449" loading="lazy" alt="Contoh Tabel pada Bootstrap" width="740" height="234" data-srcset="https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?w=1253&ssl=1 1253w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=300%2C95&ssl=1 300w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=768%2C243&ssl=1 768w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=1024%2C324&ssl=1 1024w" data-recalc-dims="1" data-src="https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=740%2C234&ssl=1" data-sizes="(max-width: 740px) 100vw, 740px" class="size-full wp-image-449 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img aria-describedby="caption-attachment-449" loading="lazy" class="size-full wp-image-449" src="https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=740%2C234&ssl=1" alt="Contoh Tabel pada Bootstrap" width="740" height="234" srcset="https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?w=1253&ssl=1 1253w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=300%2C95&ssl=1 300w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=768%2C243&ssl=1 768w, https://i2.wp.com/codelatte.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-4.46.30-AM.png?resize=1024%2C324&ssl=1 1024w" sizes="(max-width: 740px) 100vw, 740px" data-recalc-dims="1" /></noscript></noscript><p id="caption-attachment-449" class="wp-caption-text">Contoh Tabel pada Bootstrap</p></div> <p> </p> <p>Sebenarnya banyak sekali <code>class</code> untuk table pada Bootstrap. Kita bisa membuat tabel tanpa border, tabel kontekstual, bahkan sampai membuat tabel responsive. Kalian bisa lihat dibawah tentang <code>class</code> yang saya maksud diatas.</p> <ul> <li><code>.table-dark</code></li> <li>Kombinasi <code>.table-dark</code> dan <code>.table-striped</code></li> <li><code>.table-borderless</code></li> <li><code>.table-primary</code></li> <li><code>.table-success</code></li> <li><code>.table-danger</code></li> <li><code>.table-info</code></li> <li><code>.table-warning</code></li> <li><code>.table-active</code></li> <li><code>.table-secondary</code></li> <li><code>.table-sm</code> > Tabel berukuran lebih kecil dari default.</li> <li><code>.table-responsive</code></li> </ul> <p>Sekian artikel kali ini, semoga bermanfaat dan sampai jumpa pada artikel berikutnya!</p> <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Bagikan ini:</h3><div class="sd-content"><ul><li class="share-twitter"><a rel="nofollow noopener noreferrer" data-shared="sharing-twitter-448" class="share-twitter sd-button share-icon" href="https://codelatte.org/membuat-tabel-pada-bootstrap/?share=twitter" target="_blank" title="Klik untuk berbagi pada Twitter"><span>Twitter</span></a></li><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-448" class="share-facebook sd-button share-icon" href="https://codelatte.org/membuat-tabel-pada-bootstrap/?share=facebook" target="_blank" title="Klik untuk membagikan di Facebook"><span>Facebook</span></a></li><li class="share-end"></li></ul></div></div></div><div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1020574762848905" data-ad-slot="8436339741"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <!-- AI CONTENT END 1 --> <div class="clear"></div> </div><!--/.entry--> </div> <div class="entry-footer group"> <p class="post-tags"><span>Tags:</span> <a href="https://codelatte.org/tag/bootstrap/" rel="tag">Bootstrap</a></p> <div class="clear"></div> <div class="author-bio"> <div class="bio-avatar"><img alt src="https://codelatte.org/wp-content/uploads/2020/07/avatar_user_1_1594238364-128x128.jpg" class="avatar avatar-128 photo jetpack-lazy-image" height="128" width="128" loading="lazy" data-lazy-srcset="https://codelatte.org/wp-content/uploads/2020/07/avatar_user_1_1594238364-256x256.jpg 2x" data-lazy-src="https://codelatte.org/wp-content/uploads/2020/07/avatar_user_1_1594238364-128x128.jpg?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><noscript><img alt='' data-srcset='https://codelatte.org/wp-content/uploads/2020/07/avatar_user_1_1594238364-256x256.jpg 2x' height='128' width='128' loading='lazy' data-src="https://codelatte.org/wp-content/uploads/2020/07/avatar_user_1_1594238364-128x128.jpg" class="avatar avatar-128 photo lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img alt='' src='https://codelatte.org/wp-content/uploads/2020/07/avatar_user_1_1594238364-128x128.jpg' srcset='https://codelatte.org/wp-content/uploads/2020/07/avatar_user_1_1594238364-256x256.jpg 2x' class='avatar avatar-128 photo' height='128' width='128' loading='lazy'/></noscript></noscript></div> <p class="bio-name">Abay</p> <p class="bio-desc">Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, <a href="https://abaykan.com/">abay@codelatte.org</a></p> <div class="clear"></div> </div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- header --> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4236107873240528" data-ad-slot="5689574448"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <ul class="post-nav group"> <li class="next"><a href="https://codelatte.org/contoh-dan-cara-penggunaan-gambar-pada-bootstrap/" rel="next"><i class="fas fa-chevron-right"></i><strong>Next</strong> <span>Contoh dan Cara Penggunaan Gambar pada Bootstrap</span></a></li> <li class="previous"><a href="https://codelatte.org/aturan-penulisan-pada-bootstrap/" rel="prev"><i class="fas fa-chevron-left"></i><strong>Previous</strong> <span>Aturan Penulisan pada Bootstrap</span></a></li> </ul> <div id="comments" class="themeform"> <!-- comments open, no comments --> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Tinggalkan Balasan <small><a rel="nofollow" id="cancel-comment-reply-link" href="/membuat-tabel-pada-bootstrap/#respond" style="display:none;">Batalkan balasan</a></small> </h3> <form id="commentform" class="comment-form"> <iframe title="Formulir Komentar" name="jetpack_remote_comment" style="width:100%; height: 430px; border:0;" id="jetpack_remote_comment" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups" data-src="https://jetpack.wordpress.com/jetpack-comment/?blogid=175539205&postid=448&comment_registration=0&require_name_email=1&stc_enabled=0&stb_enabled=0&show_avatars=1&avatar_default=retro&greeting=Tinggalkan+Balasan&greeting_reply=Tinggalkan+Balasan+ke+%25s&color_scheme=light&lang=id_ID&jetpack_version=9.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=ef7be7feda3ce9cf35054e26c269ce0f6839232e#parent=https%3A%2F%2Fcodelatte.org%2Fmembuat-tabel-pada-bootstrap%2F" class="jetpack_remote_comment lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="> </iframe> <!--[if !IE]><!--> <script> document.addEventListener('DOMContentLoaded', function () { var commentForms = document.getElementsByClassName('jetpack_remote_comment'); for (var i = 0; i < commentForms.length; i++) { commentForms[i].allowTransparency = false; commentForms[i].scrolling = 'no'; } }); </script> <!--<![endif]--> </form> </div> <input type="hidden" name="comment_parent" id="comment_parent" value="" /> </div><!--/#comments--> </div> </div> </article><!--/.post--> <div class="masonry"> <article id="post-809" class="masonry-item group post-809 post type-post status-publish format-standard has-post-thumbnail hentry category-javascript tag-javascript"> <div class="masonry-inner"> <div class="entry-top"> <a class="entry-thumbnail" href="https://codelatte.org/membuat-variabel-pada-javascript/"> <img width="520" height="347" src="https://i1.wp.com/codelatte.org/wp-content/uploads/2018/09/javscript-1.png?resize=520%2C347&ssl=1" class="attachment-gridzone-medium size-gridzone-medium wp-post-image jetpack-lazy-image" alt="Membuat Variabel pada Javascript" loading="lazy" data-lazy-srcset="https://i1.wp.com/codelatte.org/wp-content/uploads/2018/09/javscript-1.png?zoom=2&resize=520%2C347&ssl=1 1040w, https://i1.wp.com/codelatte.org/wp-content/uploads/2018/09/javscript-1.png?zoom=3&resize=520%2C347&ssl=1 1560w" data-lazy-sizes="(max-width: 520px) 100vw, 520px" data-lazy-src="https://i1.wp.com/codelatte.org/wp-content/uploads/2018/09/javscript-1.png?resize=520%2C347&ssl=1&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /> </a> <div class="entry-category"><a href="https://codelatte.org/category/javascript/" rel="category tag">Javascript</a></div> </div> <h2 class="entry-title"> <a href="https://codelatte.org/membuat-variabel-pada-javascript/" rel="bookmark">Membuat Variabel pada Javascript</a> </h2><!--/.entry-title--> <ul class="entry-meta group"> <li class="entry-date"><i class="far fa-calendar"></i> 8 September 2018</li> </ul> </div> </article><!--/.post--> <article id="post-1137" class="masonry-item group post-1137 post type-post status-publish format-standard has-post-thumbnail hentry category-bootstrap category-css category-javascript category-referensi tag-css tag-html tag-javascript tag-minify"> <div class="masonry-inner"> <div class="entry-top"> <a class="entry-thumbnail" href="https://codelatte.org/minifikasi-kode/"> <img width="520" height="347" src="https://i0.wp.com/codelatte.org/wp-content/uploads/2018/12/minifikasi-code.png?resize=520%2C347&ssl=1" class="attachment-gridzone-medium size-gridzone-medium wp-post-image jetpack-lazy-image" alt="minifikasi-code" loading="lazy" data-lazy-srcset="https://i0.wp.com/codelatte.org/wp-content/uploads/2018/12/minifikasi-code.png?zoom=2&resize=520%2C347&ssl=1 1040w, https://i0.wp.com/codelatte.org/wp-content/uploads/2018/12/minifikasi-code.png?zoom=3&resize=520%2C347&ssl=1 1560w" data-lazy-sizes="(max-width: 520px) 100vw, 520px" data-lazy-src="https://i0.wp.com/codelatte.org/wp-content/uploads/2018/12/minifikasi-code.png?resize=520%2C347&ssl=1&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /> </a> <div class="entry-category"><a href="https://codelatte.org/category/bootstrap/" rel="category tag">Bootstrap</a> <a href="https://codelatte.org/category/css/" rel="category tag">CSS</a> <a href="https://codelatte.org/category/javascript/" rel="category tag">Javascript</a> <a href="https://codelatte.org/category/referensi/" rel="category tag">Referensi</a></div> </div> <h2 class="entry-title"> <a href="https://codelatte.org/minifikasi-kode/" rel="bookmark">Minifikasi, Memperkecil Ukuran File Code</a> </h2><!--/.entry-title--> <ul class="entry-meta group"> <li class="entry-date"><i class="far fa-calendar"></i> 21 Desember 2018</li> </ul> </div> </article><!--/.post--> <article id="post-1412" class="masonry-item group post-1412 post type-post status-publish format-standard has-post-thumbnail hentry category-javascript category-php category-referensi tag-ajax tag-javascript tag-php"> <div class="masonry-inner"> <div class="entry-top"> <a class="entry-thumbnail" href="https://codelatte.org/membuat-aplikasi-chat-real-time-php-ajax/"> <img width="520" height="347" src="https://i1.wp.com/codelatte.org/wp-content/uploads/2020/04/Screenshot-from-2020-04-11-22-44-16.png?resize=520%2C347&ssl=1" class="attachment-gridzone-medium size-gridzone-medium wp-post-image jetpack-lazy-image" alt="Membuat Aplikasi Chat Real Time" loading="lazy" data-lazy-srcset="https://i1.wp.com/codelatte.org/wp-content/uploads/2020/04/Screenshot-from-2020-04-11-22-44-16.png?resize=520%2C347&ssl=1 520w, https://i1.wp.com/codelatte.org/wp-content/uploads/2020/04/Screenshot-from-2020-04-11-22-44-16.png?zoom=2&resize=520%2C347&ssl=1 1040w" data-lazy-sizes="(max-width: 520px) 100vw, 520px" data-lazy-src="https://i1.wp.com/codelatte.org/wp-content/uploads/2020/04/Screenshot-from-2020-04-11-22-44-16.png?resize=520%2C347&ssl=1&is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /> </a> <div class="entry-category"><a href="https://codelatte.org/category/javascript/" rel="category tag">Javascript</a> <a href="https://codelatte.org/category/php/" rel="category tag">PHP</a> <a href="https://codelatte.org/category/referensi/" rel="category tag">Referensi</a></div> </div> <h2 class="entry-title"> <a href="https://codelatte.org/membuat-aplikasi-chat-real-time-php-ajax/" rel="bookmark">Membuat Aplikasi Chat Real Time (PHP + AJAX)</a> </h2><!--/.entry-title--> <ul class="entry-meta group"> <li class="entry-date"><i class="far fa-calendar"></i> 11 April 2020</li> </ul> </div> </article><!--/.post--> </div> </div><!--/.content--> <div class="sidebar s1"> <div class="sidebar-content"> <div id="categories-5" class="widget widget_categories"><h3 class="group"><span>Kategori</span></h3> <ul> <li class="cat-item cat-item-32"><a href="https://codelatte.org/category/bootstrap/">Bootstrap</a> </li> <li class="cat-item cat-item-78"><a href="https://codelatte.org/category/css/">CSS</a> </li> <li class="cat-item cat-item-33"><a href="https://codelatte.org/category/desain-website/">Desain Website</a> </li> <li class="cat-item cat-item-118"><a href="https://codelatte.org/category/git/">GIT</a> </li> <li class="cat-item cat-item-48"><a href="https://codelatte.org/category/javascript/">Javascript</a> </li> <li class="cat-item cat-item-74"><a href="https://codelatte.org/category/jekyll/">Jekyll</a> </li> <li class="cat-item cat-item-93"><a href="https://codelatte.org/category/laravel/">Laravel</a> </li> <li class="cat-item cat-item-105"><a href="https://codelatte.org/category/php/">PHP</a> </li> <li class="cat-item cat-item-7"><a href="https://codelatte.org/category/referensi/">Referensi</a> </li> <li class="cat-item cat-item-112"><a href="https://codelatte.org/category/server/">Server</a> </li> <li class="cat-item cat-item-1"><a href="https://codelatte.org/category/tak-berkategori/">Tak Berkategori</a> </li> <li class="cat-item cat-item-25"><a href="https://codelatte.org/category/template/">Template</a> </li> <li class="cat-item cat-item-37"><a href="https://codelatte.org/category/wordpress/">Wordpress</a> </li> </ul> </div> </div><!--/.sidebar-content--> </div><!--/.sidebar--> </div><!--/.main-inner--> </div><!--/.main--> </div><!--/.container-inner--> </div><!--/.container--> <div class="clear"></div> <footer id="footer"> <div id="footer-bottom"> <a id="back-to-top" href="#"><i class="fas fa-angle-up"></i></a> <div class="pad group"> <div class="grid one-full"> <div id="copyright"> <p>CODELATTE © 2020. All Rights Reserved.</p> </div><!--/#copyright--> <div id="credit"> <p>Powered by <a href="http://wordpress.org" rel="nofollow">WordPress</a>. Theme by <a href="http://alx.media" rel="nofollow">Alx</a>.</p> </div><!--/#credit--> </div> </div><!--/.pad--> </div><!--/#footer-bottom--> </footer><!--/#footer--> </div><!--/#wrapper--> <script type="text/javascript"> window.WPCOM_sharing_counts = {"https:\/\/codelatte.org\/membuat-tabel-pada-bootstrap\/":448}; </script> <script type='text/javascript' src='https://c0.wp.com/p/jetpack/9.2/_inc/build/photon/photon.min.js' id='jetpack-photon-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/plugins/wp-smushit/app/assets/js/smush-lazy-load.min.js?ver=3.7.3' id='smush-lazy-load-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/jquery.fitvids.js?ver=5.5.3' id='gridzone-fitvids-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/jq-sticky-anything.min.js?ver=5.5.3' id='gridzone-jq-sticky-anything-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/imagesloaded.pkgd.min.js?ver=5.5.3' id='gridzone-imagesloaded-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/masonry.pkgd.min.js?ver=5.5.3' id='gridzone-masonry-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/scripts.js?ver=5.5.3' id='gridzone-scripts-js'></script> <script type='text/javascript' src='https://c0.wp.com/c/5.5.3/wp-includes/js/comment-reply.min.js' id='comment-reply-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/plugins/jetpack/vendor/automattic/jetpack-lazy-images/src/js/lazy-images.min.js?ver=1.0.0' id='jetpack-lazy-images-js'></script> <script type='text/javascript' src='https://codelatte.org/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=ykypSJdAzbQ23to' id='enlighterjs-js'></script> <script type='text/javascript' id='enlighterjs-js-after'> !function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":1,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":true,"textOverflow":"scroll","linenumbers":false,"theme":"dracula","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console); </script> <script type='text/javascript' src='https://c0.wp.com/c/5.5.3/wp-includes/js/wp-embed.min.js' id='wp-embed-js'></script> <script type='text/javascript' id='sharing-js-js-extra'> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://c0.wp.com/p/jetpack/9.2/_inc/build/sharedaddy/sharing.min.js' id='sharing-js-js'></script> <script type='text/javascript' id='sharing-js-js-after'> var windowOpen; jQuery( document.body ).on( 'click', 'a.share-twitter', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' ); return false; }); var windowOpen; jQuery( document.body ).on( 'click', 'a.share-facebook', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; }); </script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <!--[if IE]> <script type="text/javascript"> if ( 0 === window.location.hash.indexOf( '#comment-' ) ) { // window.location.reload() doesn't respect the Hash in IE window.location.hash = window.location.hash; } </script> <![endif]--> <script type="text/javascript"> (function () { var comm_par_el = document.getElementById( 'comment_parent' ), comm_par = ( comm_par_el && comm_par_el.value ) ? comm_par_el.value : '', frame = document.getElementById( 'jetpack_remote_comment' ), tellFrameNewParent; tellFrameNewParent = function () { if ( comm_par ) { frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=175539205&postid=448&comment_registration=0&require_name_email=1&stc_enabled=0&stb_enabled=0&show_avatars=1&avatar_default=retro&greeting=Tinggalkan+Balasan&greeting_reply=Tinggalkan+Balasan+ke+%25s&color_scheme=light&lang=id_ID&jetpack_version=9.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=ef7be7feda3ce9cf35054e26c269ce0f6839232e#parent=https%3A%2F%2Fcodelatte.org%2Fmembuat-tabel-pada-bootstrap%2F" + '&replytocom=' + parseInt( comm_par, 10 ).toString(); } else { frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=175539205&postid=448&comment_registration=0&require_name_email=1&stc_enabled=0&stb_enabled=0&show_avatars=1&avatar_default=retro&greeting=Tinggalkan+Balasan&greeting_reply=Tinggalkan+Balasan+ke+%25s&color_scheme=light&lang=id_ID&jetpack_version=9.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=ef7be7feda3ce9cf35054e26c269ce0f6839232e#parent=https%3A%2F%2Fcodelatte.org%2Fmembuat-tabel-pada-bootstrap%2F"; } }; if ( 'undefined' !== typeof addComment ) { addComment._Jetpack_moveForm = addComment.moveForm; addComment.moveForm = function ( commId, parentId, respondId, postId ) { var returnValue = addComment._Jetpack_moveForm( commId, parentId, respondId, postId ), cancelClick, cancel; if ( false === returnValue ) { cancel = document.getElementById( 'cancel-comment-reply-link' ); cancelClick = cancel.onclick; cancel.onclick = function () { var cancelReturn = cancelClick.call( this ); if ( false !== cancelReturn ) { return cancelReturn; } if ( ! comm_par ) { return cancelReturn; } comm_par = 0; tellFrameNewParent(); return cancelReturn; }; } if ( comm_par == parentId ) { return returnValue; } comm_par = parentId; tellFrameNewParent(); return returnValue; }; } // Do the post message bit after the dom has loaded. document.addEventListener( 'DOMContentLoaded', function () { var iframe_url = "https:\/\/jetpack.wordpress.com"; if ( window.postMessage ) { if ( document.addEventListener ) { window.addEventListener( 'message', function ( event ) { var origin = event.origin.replace( /^http:\/\//i, 'https://' ); if ( iframe_url.replace( /^http:\/\//i, 'https://' ) !== origin ) { return; } jQuery( frame ).height( event.data ); }); } else if ( document.attachEvent ) { window.attachEvent( 'message', function ( event ) { var origin = event.origin.replace( /^http:\/\//i, 'https://' ); if ( iframe_url.replace( /^http:\/\//i, 'https://' ) !== origin ) { return; } jQuery( frame ).height( event.data ); }); } } }) })(); </script> <script type='text/javascript' src='https://stats.wp.com/e-202049.js' async='async' defer='defer'></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:9.2',blog:'175539205',post:'448',tz:'7',srv:'codelatte.org'} ]); _stq.push([ 'clickTrackerInit', '175539205', '448' ]); </script> </body> </html>