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>  

Xem ví dụ


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>  

Xem ví dụ


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>  

Xem ví dụ


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>  
  

Xem ví dụ


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>  

Xem ví dụ

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>  

Xem ví dụ 


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>

Xem ví dụ


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>  

Xem ví dụ


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>  

Xem ví dụ


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>  

Xem ví dụ


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>  

Xem ví dụ


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>  

Xem ví dụ


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>  

Xem ví dụ