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.id/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.id</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" decoding="async" loading="lazy" class="size-full wp-image-449" src="https://i0.wp.com/codelatte.id/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://i0.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://i0.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://i0.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://i0.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" /><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-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="Click to share on Facebook" ><span>Facebook</span></a></li><li class="share-x"><a rel="nofollow noopener noreferrer" data-shared="sharing-x-448" class="share-x sd-button share-icon" href="https://codelatte.org/membuat-tabel-pada-bootstrap/?share=x" target="_blank" title="Click to share on X" ><span>X</span></a></li><li class="share-end"></li></ul></div></div></div> <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' 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' decoding='async'/></div>
<p class="bio-name">Abay</p>
<p class="bio-desc">Cheers, I am Abay and I make things for fun. I love turning exciting ideas into horrible code.</p>
<div class="clear"></div>
</div>
<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">Leave a Reply<small><a rel="nofollow" id="cancel-comment-reply-link" href="/membuat-tabel-pada-bootstrap/#respond" style="display:none;">Cancel reply</a></small></h3> <form id="commentform" class="comment-form">
<iframe
title="Comment Form"
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=Leave+a+Reply&jetpack_comments_nonce=71e5ae082b&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=12.8.1&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=8f78f13595973c4bfbfe1dee22a9eb2b72679200#parent=https%3A%2F%2Fcodelatte.org%2Fmembuat-tabel-pada-bootstrap%2F"
name="jetpack_remote_comment"
style="width:100%; height: 430px; border:0;"
class="jetpack_remote_comment"
id="jetpack_remote_comment"
sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups"
>
</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-646" class="masonry-item group post-646 post type-post status-publish format-standard has-post-thumbnail hentry category-desain-website category-referensi tag-phpmyadmin">
<div class="masonry-inner">
<div class="entry-top">
<a class="entry-thumbnail" href="https://codelatte.org/cara-mengganti-tema-phpmyadmin/">
<img width="520" height="347" src="https://i0.wp.com/codelatte.org/wp-content/uploads/2018/08/phpmyadmin-theme.png?resize=520%2C347&ssl=1" class="attachment-gridzone-medium size-gridzone-medium wp-post-image" alt="Cara Mengganti Tema phpMyAdmin" decoding="async" loading="lazy" /> </a>
<div class="entry-category"><a href="https://codelatte.org/category/desain-website/" rel="category tag">Desain Website</a> <a href="https://codelatte.org/category/referensi/" rel="category tag">Referensi</a></div>
</div>
<h2 class="entry-title">
<a href="https://codelatte.org/cara-mengganti-tema-phpmyadmin/" rel="bookmark">Cara Mengganti Tema phpMyAdmin</a>
</h2><!--/.entry-title-->
<ul class="entry-meta group">
<li class="entry-date"><i class="far fa-calendar"></i> 5 August 2018</li>
</ul>
</div>
</article><!--/.post-->
<article id="post-350" class="masonry-item group post-350 post type-post status-publish format-standard has-post-thumbnail hentry category-referensi">
<div class="masonry-inner">
<div class="entry-top">
<a class="entry-thumbnail" href="https://codelatte.org/seberapa-penting-frontend-dalam-sebuah-website/">
<img width="520" height="347" src="https://i0.wp.com/codelatte.org/wp-content/uploads/2018/07/seberapa-penting-frontend.png?resize=520%2C347&ssl=1" class="attachment-gridzone-medium size-gridzone-medium wp-post-image" alt="seberapa-penting-frontend" decoding="async" loading="lazy" /> </a>
<div class="entry-category"><a href="https://codelatte.org/category/referensi/" rel="category tag">Referensi</a></div>
</div>
<h2 class="entry-title">
<a href="https://codelatte.org/seberapa-penting-frontend-dalam-sebuah-website/" rel="bookmark">Seberapa Penting Frontend dalam Sebuah Website</a>
</h2><!--/.entry-title-->
<ul class="entry-meta group">
<li class="entry-date"><i class="far fa-calendar"></i> 14 July 2018</li>
</ul>
</div>
</article><!--/.post-->
<article id="post-1261" class="masonry-item group post-1261 post type-post status-publish format-standard has-post-thumbnail hentry category-ads category-referensi tag-ads tag-domainesia tag-konten-website tag-website">
<div class="masonry-inner">
<div class="entry-top">
<a class="entry-thumbnail" href="https://codelatte.org/begini-cara-praktis-membuat-website-bersama-domainesia/">
<img width="520" height="347" src="https://i0.wp.com/codelatte.org/wp-content/uploads/2019/11/domainesia.png?resize=520%2C347&ssl=1" class="attachment-gridzone-medium size-gridzone-medium wp-post-image" alt="Begini Cara Praktis Membuat Website Bersama DomaiNesia" decoding="async" loading="lazy" /> </a>
<div class="entry-category"><a href="https://codelatte.org/category/ads/" rel="category tag">Ads</a> <a href="https://codelatte.org/category/referensi/" rel="category tag">Referensi</a></div>
</div>
<h2 class="entry-title">
<a href="https://codelatte.org/begini-cara-praktis-membuat-website-bersama-domainesia/" rel="bookmark">Begini Cara Praktis Membuat Website Bersama DomaiNesia</a>
</h2><!--/.entry-title-->
<ul class="entry-meta group">
<li class="entry-date"><i class="far fa-calendar"></i> 6 November 2019</li>
</ul>
</div>
</article><!--/.post-->
</div>
</div><!--/.content-->
<div class="sidebar s1">
<div class="sidebar-content">
</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="#" aria-label="Back to Top"><i class="fas fa-angle-up"></i></a>
<div class="pad group">
<div class="grid one-full">
<div id="copyright">
<p>Codelatte © 2024. 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://codelatte.org/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-image-cdn/dist/image-cdn.js?minify=false&ver=132249e245926ae3e188' id='jetpack-photon-js'></script>
<script type='text/javascript' id='superpwa-register-sw-js-extra'>
/* <![CDATA[ */
var superpwa_sw = {"url":"\/superpwa-sw.js?1713553983","disable_addtohome":"0","enableOnDesktop":"","offline_message":"1","offline_message_txt":"You are currently offline."};
/* ]]> */
</script>
<script type='text/javascript' src='https://codelatte.org/wp-content/plugins/super-progressive-web-apps/public/js/register-sw.js' id='superpwa-register-sw-js'></script>
<script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/jquery.fitvids.js?ver=6.2.5' id='gridzone-fitvids-js'></script>
<script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/jq-sticky-anything.min.js?ver=6.2.5' 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=6.2.5' id='gridzone-imagesloaded-js'></script>
<script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/masonry.pkgd.min.js?ver=6.2.5' id='gridzone-masonry-js'></script>
<script type='text/javascript' src='https://codelatte.org/wp-content/themes/gridzone/js/scripts.js?ver=6.2.5' id='gridzone-scripts-js'></script>
<script type='text/javascript' src='https://c0.wp.com/c/6.2.5/wp-includes/js/comment-reply.min.js' id='comment-reply-js'></script>
<script type='text/javascript' src='https://codelatte.org/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=OXpO+0+NQhcfSun' id='enlighterjs-js'></script>
<script defer type='text/javascript' src='https://stats.wp.com/e-202416.js' id='jetpack-stats-js'></script>
<script type='text/javascript' id='jetpack-stats-js-after'>
_stq = window._stq || [];
_stq.push([ "view", {v:'ext',blog:'175539205',post:'448',tz:'7',srv:'codelatte.org',j:'1:12.8.1'} ]);
_stq.push([ "clickTrackerInit", "175539205", "448" ]);
</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/12.8.1/_inc/build/sharedaddy/sharing.min.js' id='sharing-js-js'></script>
<script type='text/javascript' id='sharing-js-js-after'>
var windowOpen;
( function () {
function matches( el, sel ) {
return !! (
el.matches && el.matches( sel ) ||
el.msMatchesSelector && el.msMatchesSelector( sel )
);
}
document.body.addEventListener( 'click', function ( event ) {
if ( ! event.target ) {
return;
}
var el;
if ( matches( event.target, 'a.share-facebook' ) ) {
el = event.target;
} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) {
el = event.target.parentNode;
}
if ( el ) {
event.preventDefault();
// If there's another sharing window open, close it.
if ( typeof windowOpen !== 'undefined' ) {
windowOpen.close();
}
windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' );
return false;
}
} );
} )();
var windowOpen;
( function () {
function matches( el, sel ) {
return !! (
el.matches && el.matches( sel ) ||
el.msMatchesSelector && el.msMatchesSelector( sel )
);
}
document.body.addEventListener( 'click', function ( event ) {
if ( ! event.target ) {
return;
}
var el;
if ( matches( event.target, 'a.share-x' ) ) {
el = event.target;
} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-x' ) ) {
el = event.target.parentNode;
}
if ( el ) {
event.preventDefault();
// If there's another sharing window open, close it.
if ( typeof windowOpen !== 'undefined' ) {
windowOpen.close();
}
windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomx', 'menubar=1,resizable=1,width=600,height=350' );
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>
<script type="text/javascript">
const iframe = document.getElementById( 'jetpack_remote_comment' );
const watchReply = function() {
// Check addComment._Jetpack_moveForm to make sure we don't monkey-patch twice.
if ( 'undefined' !== typeof addComment && ! addComment._Jetpack_moveForm ) {
// Cache the Core function.
addComment._Jetpack_moveForm = addComment.moveForm;
const commentParent = document.getElementById( 'comment_parent' );
const cancel = document.getElementById( 'cancel-comment-reply-link' );
function tellFrameNewParent ( commentParentValue ) {
const url = new URL( iframe.src );
if ( commentParentValue ) {
url.searchParams.set( 'replytocom', commentParentValue )
} else {
url.searchParams.delete( 'replytocom' );
}
if( iframe.src !== url.href ) {
iframe.src = url.href;
}
};
cancel.addEventListener( 'click', function () {
tellFrameNewParent( false );
} );
addComment.moveForm = function ( _, parentId ) {
tellFrameNewParent( parentId );
return addComment._Jetpack_moveForm.apply( null, arguments );
};
}
}
document.addEventListener( 'DOMContentLoaded', watchReply );
// In WP 6.4+, the script is loaded asynchronously, so we need to wait for it to load before we monkey-patch the functions it introduces.
document.querySelector('#comment-reply-js')?.addEventListener( 'load', watchReply );
window.addEventListener( 'message', function ( event ) {
if ( event.origin !== 'https://jetpack.wordpress.com' ) {
return;
}
iframe.style.height = event.data + 'px';
});
</script>
</body>
</html><script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'876f35aa0e5c2262',t:'MTcxMzU1Mzk4NS41MTcwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script> 