Bootstrap - Tabel
Bootstrap menyediakan tata letak yang bersih untuk membuat tabel. Beberapa elemen tabel yang didukung oleh Bootstrap adalah -
| Sr.No. | Tag & Deskripsi |
|---|---|
| 1 | <table> Elemen pembungkus untuk menampilkan data dalam format tabel |
| 2 | <thead> Elemen penampung untuk baris header tabel (<tr>) untuk memberi label kolom tabel. |
| 3 | <tbody> Elemen wadah untuk baris tabel (<tr>) di badan tabel. |
| 4 | <tr> Elemen penampung untuk sekumpulan sel tabel (<td> atau <th>) yang muncul di satu baris. |
| 5 | <td> Sel tabel default. |
| 6 | <th> Sel tabel khusus untuk label kolom (atau baris, bergantung pada cakupan dan penempatan). Harus digunakan dalam <thead> |
| 7 | <caption> Deskripsi atau ringkasan dari apa yang dipegang tabel. |
Tabel Dasar
Jika Anda menginginkan gaya tabel dasar yang bagus dengan hanya beberapa bantalan tipis dan pemisah horizontal, tambahkan kelas dasar .table ke tabel mana pun seperti yang ditunjukkan pada contoh berikut -
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>Kelas Tabel Opsional
Bersamaan dengan markup tabel dasar dan kelas .table, ada beberapa kelas tambahan yang dapat Anda gunakan untuk mengatur gaya markup. Bagian berikut akan memberi Anda gambaran sekilas tentang semua kelas ini.
Meja Bergaris
Dengan menambahkan kelas .table-striped , Anda akan mendapatkan garis-garis pada baris di dalam <tbody> seperti yang terlihat pada contoh berikut -
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Tabel Berbatasan
Dengan menambahkan kelas .table-bordered , Anda akan mendapatkan batas yang mengelilingi setiap elemen dan sudut membulat di sekitar seluruh tabel seperti yang terlihat pada contoh berikut -
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Arahkan Tabel
Dengan menambahkan kelas .table-hover , latar belakang abu-abu terang akan ditambahkan ke baris saat kursor diarahkan ke baris tersebut, seperti yang terlihat pada contoh berikut -
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Meja kental
Dengan menambahkan class .table-condensed , baris padding dipotong menjadi dua untuk memadatkan tabel. seperti yang terlihat pada contoh berikut. Ini berguna jika Anda menginginkan informasi yang lebih padat.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Kelas kontekstual
Kelas kontekstual yang ditunjukkan dalam tabel berikut akan memungkinkan Anda untuk mengubah warna latar belakang baris tabel atau sel individual Anda.
| Sr.No. | Kelas & Deskripsi |
|---|---|
| 1 | .active Menerapkan warna hover ke baris atau sel tertentu |
| 2 | .success Menunjukkan tindakan sukses atau positif |
| 3 | .warning Menunjukkan peringatan yang mungkin perlu diperhatikan |
| 4 | .danger Menunjukkan tindakan berbahaya atau berpotensi negatif |
Kelas-kelas ini dapat diterapkan ke <tr>, <td> atau <th>.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>Tabel Responsif
Dengan menggabungkan .table apa pun dalam kelas .table-responsive , Anda akan membuat tabel di-scroll secara horizontal hingga perangkat kecil (di bawah 768px). Saat melihat pada sesuatu yang lebih besar dari lebar 768px, Anda tidak akan melihat perbedaan apapun pada tabel ini.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>