Bootstrap 4 - Bootstrap Tables
Bảng trong Bootstrap
Chúng ta có thể tạo các loại bảng Bootstrap khác nhau bằng cách sử dụng các lớp khác nhau để tạo kiểu cho chúng.
Lớp .table trong Bootstrap
Bảng html bạn cần sử dụng các thuộc tính để tạo khoảng cách, vạch ngăn giữa các hàng, giúp người xem dễ dàng đọc bảng hơn. Nhưng với bảng bootstrap bạn không cần thủ công đến vậy,bạn chỉ cần thêm lớp .table vào thẻ <table>, lớp .table có thuộc tính padding sẽ tạo ra một khoảng cách nhỏ theo hàng ngang, giúp bảng dễ xem hơn.
Ví dụ:
<div class="container">
<h1>Basic Table Example</h1>
<table class="table">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Lớp .table-striped trong Bootstrap
Lớp .table-striped sẽ tự động thêm thuộc tính background-color với mã màu #F9F9F9 vào các thẻ <tr> cách nhau một giúp bảng của bạn xem dễ dàng hơn.
<div class="container">
<h1>Striped Table Example</h1>
<table class="table table-striped">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Lớp .table-bordered
Lớp .table-bordered thêm thuộc tính border: 1px solid #ddd bao xung quanh tất cả các mặt của bảng và tạo vạch ngăn giữa các cột .
<div class="container">
<h1>Bordered Table Example</h1>
<table class="table table-striped table-bordered">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Lớp .table-hover
Lớp .table-hover thêm hiệu ứng hover với thuộc tính background-color mã màu #F5F5F5 khi trỏ chuột vào các hàng trong bảng.
<div class="container">
<h1>Hower rows Table Example</h1>
<table class="table table-hover">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Lớp table-condensed
Lớp .table-condensed giúp bảng nhỏ gọn hơn bằng cách giảm một nửa padding của bảng.
<div class="container">
<h1>Condensed Table Example</h1>
<table class="table table-condensed">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Một số lớp khác
Class | Ý nghĩa |
---|---|
.active | Thêm thuộc tính background-color mã màu #F5F5F5 vào các thẻ <td> |
.success | Thêm thuộc tính background-color mã màu #DFF0D8 vào các thẻ <td> |
.info | Thêm thuộc tính background-color mã màu #D9EDF7 vào các thẻ <td> |
.warning | Thêm thuộc tính background-color mã màu #FCF8E3 vào các thẻ <td> |
.danger | Thêm thuộc tính background-color mã màu #F2DEDE vào các thẻ <td> |
<div class="container">
<h1>Contextual classes</h1>
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Lớp .table –responsive
Lớp .table-responsive giúp bảng hiển thị tốt trên các màn hình có chiều rộng <768px. Và khi xem nội dung trên màn hình có chiều rộng >768px bảng hiển thị không có gì khác so với màn có chiều rộng <768px.
<div class="container">
<h1>Contextual classes</h1>
<div class="table-responsive">
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Lớp .table-dark
Lớp .table-dark được sử dụng để thêm màu nền đen vào bảng:
Ví dụ:
<div class="container">
<h2>Black/Dark Table</h2>
<p>The .table-dark class is used to add a black background to the table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>ajeet@jtp.com</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>mahesh@jtp.com</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>sonoo@jtp.com</td>
</tr>
</tbody>
</table>
</div>
Lớp .table-dark
Kết hợp lớp .table-dark và lớp .table-striped để tạo ra một bảng tối, có sọc:
Ví dụ:
<div class="container">
<h2>Dark Striped Table</h2>
<p>Combine the .table-dark class and .table-striped class to create a dark, striped table: </p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>ajeet@jtp.com</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>mahesh@jtp.com</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>sonoo@jtp.com</td>
</tr>
</tbody>
</table>
</div>
Lớp .table-hover
Lớp .table-hover được sử dụng để thêm hiệu ứng di chuột (màu nền xám) trên các hàng của bảng:
<div class="container">
<h2>Hoverable Dark Table</h2>
<p>The .table-hover class is used to add a hover effect (grey background color) on table rows:</p>
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>ajeet@jtp.com</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>mahesh@jtp.com</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>sonoo@jtp.com</td>
</tr>
</tbody>
</table>
</div>
Bảng ngữ cảnh trong Bootstrap
Các lớp ontextual có thể được sử dụng để tô màu toàn bộ bảng (<table>), các hàng trong bảng (<tr>) hoặc các ô trong bảng (<td>).
Các lớp có thể được sử dụng là:
.table-primary, .table-Success, .table-info, .table-warning, .table-risk, .table-active, .table-Secondary, .table-light và .table-dark:
Hãy lấy một ví dụ để xem cách sử dụng của tất cả các lớp theo ngữ cảnh trong bảng Bootstrap 4.
Ví dụ:
<div class="container">
<h2>Contextual Classes Example</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>A</td>
<td>a@jtp.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>B</td>
<td>b@jtp.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>C</td>
<td>c@jtp.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>D</td>
<td>d@jtp.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>E</td>
<td>e@jtp.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>F</td>
<td>f@jtp.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>G</td>
<td>g@jtp.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>H</td>
<td>h@jtp.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>I</td>
<td>j@jtp.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>K</td>
<td>k@jtp.com</td>
</tr>
</tbody>
</table>
</div>
Màu cho tiêu đề bảng
Bạn có thể thay đổi màu nền của tiêu đề bảng bằng cách sử dụng lớp .thead-dark để thêm nền đen vào tiêu đề bảng và lớp .thead-light để thêm nền xám cho tiêu đề bảng.
Ví dụ:
<div class="container">
<h2>Table Head Colors</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>ajeet@jtp.com</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>mahesh@jtp.com</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>sonoo@jtp.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>ajeet@jtp.com</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>mahesh@jtp.com</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>sonoo@jtp.com</td>
</tr>
</tbody>
</table>
</div>
Làm cho bảng nhỏ lại
Lớp .table-sm được sử dụng để làm cho bảng nhỏ hơn bằng cách cắt phần đệm ô làm đôi.
<div class="container">
<h2>Small Table Example</h2>
<p>The .table-sm class is used to make the table smaller by cutting cell padding in half.</p>
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>ajeet@jtp.com</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>mahesh@jtp.com</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>sonoo@jtp.com</td>
</tr>
</tbody>
</table>
</div>