Bootstrap - Tables: A Friendly Guide for Beginners

Hello there, future web developers! Today, we're going to dive into the wonderful world of Bootstrap tables. Don't worry if you've never coded before – I'll be your friendly guide on this journey, and we'll take it step by step. By the end of this tutorial, you'll be creating beautiful, responsive tables like a pro!

What are Bootstrap Tables?

Before we jump in, let's talk about what Bootstrap tables are. Imagine you're organizing your favorite books on a bookshelf. Bootstrap tables are like that bookshelf, but for your website! They help you present information in a neat, organized way that's easy for your visitors to read and understand.

Simple Table

Let's start with the basics. Here's how you create a simple Bootstrap table:

<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>

This code creates a table with three columns: Name, Age, and City. The <thead> section defines the table headers, and the <tbody> contains the actual data. The class="table" is what gives it that Bootstrap magic!

Table Variants

Bootstrap offers different styles for your tables. It's like choosing different outfits for your data! Here are some variants:

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Just add these classes to your <table> tag to change the overall look of your table. It's that easy!

Accented Tables

Want to make certain rows or cells stand out? Bootstrap's got you covered:

<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Active row</td>
<td>Stands out</td>
</tr>
<tr>
<td>Regular row</td>
<td class="table-primary">Accented cell</td>
</tr>
</tbody>
</table>

The table-active class highlights an entire row, while classes like table-primary can be used on individual cells.

Striped Rows and Columns

Remember those zebra-striped notebooks you had in school? You can do the same with your tables!

For striped rows:

<table class="table table-striped">
...
</table>

And for striped columns:

<table class="table table-striped-columns">
...
</table>

Hoverable Rows

Want your table to be interactive? Make the rows light up when you hover over them:

<table class="table table-hover">
...
</table>

It's like magic – try it out!

Bordered and Borderless Tables

You can add borders to your table:

<table class="table table-bordered">
...
</table>

Or remove them entirely:

<table class="table table-borderless">
...
</table>

Small Tables

For a more compact look, use the table-sm class:

<table class="table table-sm">
...
</table>

It's perfect for when you need to fit a lot of data in a small space!

Table Group Dividers

Want to group your data? Use the table-group-divider class:

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>

This adds a visible divider between your table body groups.

Vertical Alignment

You can control how your content aligns vertically within cells:

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>This cell and its neighbors are bottom-aligned</td>
<td>Bottom</td>
<td class="align-top">This cell is top-aligned</td>
</tr>
</tbody>
</table>

Use align-middle for middle alignment and align-top for top alignment.

Responsive Tables

Make your tables look good on all devices with the table-responsive class:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

This allows your table to scroll horizontally on smaller screens. It's like giving your table superpowers to adapt to any screen size!

Nesting

You can even put tables inside tables! Here's how:

<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Parent row</td>
<td>
<table class="table table-sm">
<tr>
<td>Nested row 1</td>
</tr>
<tr>
<td>Nested row 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

It's like Russian nesting dolls, but with tables!

Anatomy of a Table

Let's break down the parts of a table:

Table Head

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
...
</table>

The <thead> contains your column headers.

Table Foot

<table class="table">
...
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>

Use <tfoot> for table footers, great for summaries or totals.

Caption

Add a title to your table with <caption>:

<table class="table">
<caption>List of users</caption>
...
</table>

It's like giving your table a name tag!

Conclusion

And there you have it, folks! You've just learned how to create and style tables using Bootstrap. Remember, practice makes perfect, so don't be afraid to experiment with different combinations of these classes. Before you know it, you'll be creating tables that not only organize data effectively but also look fantastic!

Happy coding, and may your tables always be beautifully bootstrapped!

Feature	Class	Description
Simple Table	table	Basic Bootstrap table
Variants	table-primary, table-secondary, etc.	Different color schemes
Accented Tables	table-active, table-primary, etc.	Highlight specific rows or cells
Striped Rows	table-striped	Alternate row colors
Striped Columns	table-striped-columns	Alternate column colors
Hoverable Rows	table-hover	Highlight rows on hover
Bordered Table	table-bordered	Add borders to all sides of table and cells
Borderless Table	table-borderless	Remove all borders
Small Table	table-sm	Make tables more compact
Table Group Dividers	table-group-divider	Add a separator between table body groups
Vertical Alignment	align-top, align-middle, align-bottom	Control vertical alignment of cell content
Responsive Table	table-responsive	Make tables scroll horizontally on small devices
Nesting	N/A	Tables can be nested within table cells
Table Head	<thead>	Define table header
Table Foot	<tfoot>	Define table footer
Caption	<caption>	Add a caption to the table

Dalam Bahasa Melayu (Malay):

Bootstrap - Jadual: Panduan Mesra untuk Pemula

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menarik dari Bootstrap jadual. Jangan khawatir jika Anda belum pernah mengoding sebelumnya – saya akan menjadi panduan ramah Anda dalam perjalanan ini, dan kita akan mengambil langkah-langkah secara bertahap. Pada akhir panduan ini, Anda akan dapat membuat jadual yang indah dan responsif seperti seorang ahli!

Apa Itu Jadual Bootstrap?

Sebelum kita masuk ke detil, mari bicarakan apa itu jadual Bootstrap. Bayangkan Anda mengatur buku kesukaan Anda di rak buku. Jadual Bootstrap seperti rak buku itu, tapi untuk situs web Anda! Mereka membantu Anda menyajikan informasi dalam cara yang rapi dan terorganisir, yang mudah bagi pengunjung Anda untuk membaca dan mengerti.

Jadual Sederhana

mari mulai dari dasar. Berikut adalah cara Anda membuat jadual Bootstrap yang sederhana:

<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>

Kode ini membuat jadual dengan tiga kolom: Nama, Umur, dan Kota. Bagian <thead> menentukan header jadual, dan <tbody> mengandung data nyata. Kelas class="table" adalah yang memberikan magik Bootstrap!

Varian Jadual

Bootstrap menawarkan gaya yang berbeda untuk jadual Anda. Itu seperti memilih pakaian yang berbeda untuk data Anda! Berikut adalah beberapa varian:

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Hanya tambahkan kelas ini ke tag <table> Anda untuk mengubah penampilan keseluruhan jadual. Itu mudah!

Jadual Berwarna

Ingin membuat baris atau sel tertentu tampak menonjol? Bootstrap bisa menangani itu:

<table class="table">
<thead>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Baris aktif</td>
<td>Tampil menonjol</td>
</tr>
<tr>
<td>Baris biasa</td>
<td class="table-primary">Sel berwarna</td>
</tr>
</tbody>
</table>

Kelas table-active menyorot seluruh baris, sedangkan kelas seperti table-primary dapat digunakan pada sel individual.

Baris dan Kolom Bertitik

Ingat buku catatan beritik yang Anda gunakan di sekolah? Anda bisa melakukan hal yang sama dengan jadual Anda!

Untuk baris beritik:

<table class="table table-striped">
...
</table>

Dan untuk kolom beritik:

<table class="table table-striped-columns">
...
</table>

Baris yang Bisa Di-hover

Ingin membuat jadual Anda interaktif? Buat baris berkedip saat Anda hover:

<table class="table table-hover">
...
</table>

Itu seperti magik – cobalah!

Jadual Bergaris dan Tanpa Garis

Anda bisa menambahkan garis ke jadual Anda:

<table class="table table-bordered">
...
</table>

Atau menghapus garis sepenuhnya:

<table class="table table-borderless">
...
</table>

Jadual Kecil

Untuk penampilan yang lebih kompak, gunakan kelas table-sm:

<table class="table table-sm">
...
</table>

Itu sempurna untuk saat Anda perlu memasukkan banyak data di ruang kecil!

Pembatasan Grup Jadual

Ingin mengelompokkan data Anda? Gunakan kelas table-group-divider:

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>

Ini menambahkan pembatasan yang terlihat antara kelompok body jadual Anda.

Penyusunan Vertikal

Anda bisa mengontrol bagaimana konten Anda menyusun vertikal dalam sel:

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>Cell ini dan tetangganya menyusun ke bawah</td>
<td>Bawah</td>
<td class="align-top">Cell ini menyusun ke atas</td>
</tr>
</tbody>
</table>

Gunakan align-middle untuk penyusunan tengah dan align-top untuk penyusunan atas.

Jadual Responsif

Buat jadual Anda terlihat bagus di semua perangkat dengan kelas table-responsive:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Ini memungkinkan jadual Anda untuk menggulir secara horizontal di layar kecil. Itu seperti memberikan superpower ke jadual Anda untuk menyesuaikan dengan semua ukuran layar!

Penyusunan

Anda bahkan bisa memasukkan jadual di dalam jadual! Begini caranya:

<table class="table table-striped">
<thead>
<tr>
<th>Nama</th>
<th>Detil</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baris induk</td>
<td>
<table class="table table-sm">
<tr>
<td>Baris bersarang 1</td>
</tr>
<tr>
<td>Baris bersarang 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Itu seperti boneka Rusia bersarang, tapi dengan jadual!

Anatomi Jadual

mari pecahkan bagian-bagian jadual:

Header Jadual

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
...
</table>

<thead> mengandung header kolom Anda.

Foot Jadual

<table class="table">
...
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>

Gunakan <tfoot> untuk footer jadual, yang bagus untuk ringkasan atau total.

Caption

Tambahkan judul ke jadual Anda dengan <caption>:

<table class="table">
<caption>Daftar pengguna</caption>
...
</table>

Itu seperti memberikan tag nama ke jadual Anda!

Kesimpulan

Dan begitu juga, teman-teman! Anda baru saja belajar membuat dan menggaya jadual menggunakan Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba kombinasi kelas yang berbeda. Sebelum Anda tahu, Anda akan dapat membuat jadual yang tidak hanya mengatur data secara efektif tapi juga tampak fantastis!

Semangat coding, dan may your tables always be beautifully bootstrapped!

Credits: Image by storyset