Bài viết này chúng ta sẽ tìm hiểu về bảng (table) trong Bootstrap 4 đồng thời học các lớp dùng định dạng bảng trong Bootstrap 4 thông qua các ví dụ luôn nhé các bạn.
Table (Bảng) cơ bản trong Bootstap 4
Để định nghĩa một bảng dùng Bootstrap 4, chúng ta sử dụng lớp .table ở phần tử table.
<div class="container"> <h2>Bảng cơ bản</h2> <table class="table"> <thead> <tr> <th>Ten</th> <th>Ho</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Tiep</td> <td>Doe</td> <td>tiepha@gmail.com</td> </tr> <tr> <td>Phong</td> <td>Tran</td> <td>maisieuphong@gmail.com</td> </tr> <tr> <td>Nam</td> <td>Xuyen</td> <td>namxuyen@gmail.com</td> </tr> </tbody> </table> </div>
Bảng kẻ sọc (Striped Rows)
Lớp .table-striped thêm sọc ngựa vằn vào bảng:
Ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bảng cơ bản</h2> <table class="table table-striped "> <thead> <tr> <th>Ten</th> <th>Ho</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Tiep</td> <td>Doe</td> <td>tiepha@gmail.com</td> </tr> <tr> <td>Phong</td> <td>Tran</td> <td>maisieuphong@gmail.com</td> </tr> <tr> <td>Nam</td> <td>Xuyen</td> <td>namxuyen@gmail.com</td> </tr> </tbody> </table> </div> </body> </html>
Kết quả như sau:
Bảng có viền.
Lớp .table-bordered thêm các đường viền trên tất cả các mặt của bảng và các ô:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bảng cơ bản</h2> <table class="table table-striped table-bordered "> <thead> <tr> <th>Ten</th> <th>Ho</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Tiep</td> <td>Doe</td> <td>tiepha@gmail.com</td> </tr> <tr> <td>Phong</td> <td>Tran</td> <td>maisieuphong@gmail.com</td> </tr> <tr> <td>Nam</td> <td>Xuyen</td> <td>namxuyen@gmail.com</td> </tr> </tbody> </table> </div> </body> </html>
Di chuột qua hàng (Hover Rows)
Lớp .table-hover thêm hiệu ứng di chuột (màu nền xám) trên các hàng của bảng:
<table class="table table-striped table-bordered table-hover"> ... </table>
Bảng đen / tối (Black/Dark Table)
Lớp .table-dark thêm nền đen vào bảng:
<table class="table table-dark"> ... </table>
Bảng sọc sẫm (Dark Striped Table)
Kết hợp .table-dark và .table-sọc để tạo ra một bảng sọc sẫm màu:
<table class="table table-dark table-striped"> ... </table>
Bảng tối có hiệu ứng ở dòng khi di chuyển
Lớp .table-hover thêm hiệu ứng di chuột (màu nền xám) trên các hàng của bảng:
<table class="table table-dark table-hover"> ... </table>
Bảng không viền
Lớp .table-borderless xóa các đường viền khỏi bảng:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <table class="table table-borderless"> <thead> <tr> <th>Ten</th> <th>Ho</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Tiep</td> <td>Doe</td> <td>tiepha@gmail.com</td> </tr> <tr> <td>Phong</td> <td>Tran</td> <td>maisieuphong@gmail.com</td> </tr> <tr> <td>Nam</td> <td>Xuyen</td> <td>namxuyen@gmail.com</td> </tr> </tbody> </table> </div> </body> </html>
Các lớp theo ngữ cảnh
Các lớp theo ngữ cảnh có thể được sử dụng để tô màu toàn bộ bảng (<table>), các hàng của bảng (<tr>) hoặc các ô trong bảng (<td>).
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Lop ngu canh</h2> <table class="table"> <thead> <tr> <th>Lop ngu canh</th> <th>Ten</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Mac Dinh</td> <td>macdinh@gmail.com</td> </tr> <tr class="table-primary"> <td>Primary</td> <td>Tiep</td> <td>Tiepha@gmail.com</td> </tr> <tr class="table-success"> <td>Success</td> <td>Phong</td> <td>Phongsieumai@gmail.com</td> </tr> <tr class="table-danger"> <td>Danger</td> <td>Lanh</td> <td>lanh@gmail.com</td> </tr> <tr class="table-info"> <td>Info</td> <td>Hoang</td> <td>hoanghoa@gmail.com</td> </tr> <tr class="table-warning"> <td>Warning</td> <td>Tuan</td> <td>tuandung@gmail.com</td> </tr> <tr class="table-active"> <td>Active</td> <td>Kichhoat</td> <td>Kichhoat@gmail.com</td> </tr> <tr class="table-secondary"> <td>Secondary</td> <td>Secondson</td> <td>Secondson@gmail.com</td> </tr> <tr class="table-light"> <td>Light</td> <td>An</td> <td>Annn@gmail.com.com</td> </tr> <tr class="table-dark text-dark"> <td>Dark</td> <td>Darknight</td> <td>DarknightGmail.com</td> </tr> </tbody> </table> </div> </body> </html>
Các lớp ngữ cảnh có thể được sử dụng là:
| Class | Description |
|---|---|
.table-primary | Blue: Indicates an important action |
.table-success | Green: Indicates a successful or positive action |
.table-danger | Red: Indicates a dangerous or potentially negative action |
.table-info | Light blue: Indicates a neutral informative change or action |
.table-warning | Orange: Indicates a warning that might need attention |
.table-active | Grey: Applies the hover color to the table row or table cell |
.table-secondary | Grey: Indicates a slightly less important action |
.table-light | Light grey table or table row background |
.table-dark | Dark grey table or table row background |
Màu đầu bả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:
<div class="container"> <table class="table"> <thead class="thead-light"> <tr> <th>Ten</th> <th>Ho</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Tiep</td> <td>Doe</td> <td>tiepha@gmail.com</td> </tr> <tr> <td>Phong</td> <td>Tran</td> <td>maisieuphong@gmail.com</td> </tr> <tr> <td>Nam</td> <td>Xuyen</td> <td>namxuyen@gmail.com</td> </tr> </tbody> </table> <table class="table"> <thead class="thead-dark"> <tr> <th>Ten</th> <th>Ho</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Tiep</td> <td>Doe</td> <td>tiepha@gmail.com</td> </tr> <tr> <td>Phong</td> <td>Tran</td> <td>maisieuphong@gmail.com</td> </tr> <tr> <td>Nam</td> <td>Xuyen</td> <td>namxuyen@gmail.com</td> </tr> </tbody> </table> </div>
Bảng nhỏ (Small Table)
Lớp .table-sm làm cho bảng nhỏ hơn bằng cách giảm padding xuống 1 nửa
Code test:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <table class="table table-sm"> <thead class="thead-light"> <tr> <th>Ten</th> <th>Ho</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Tiep</td> <td>Doe</td> <td>tiepha@gmail.com</td> </tr> <tr> <td>Phong</td> <td>Tran</td> <td>maisieuphong@gmail.com</td> </tr> <tr> <td>Nam</td> <td>Xuyen</td> <td>namxuyen@gmail.com</td> </tr> </tbody> </table> </div> </body> </html>
Bảng đáp ứng (Responsive Tables)
Lớp .table-responsive thêm một thanh cuộn vào bảng khi cần thiết (khi nó quá lớn theo chiều ngang). Ví dụ một thanh cuộn ngang được thêm vào bảng nếu kích thước màn hình trình duyệt bé hơn 992px. Còn khi kích thước màn hình lớn hơn 992px thì không có gì thay đổi.
<div class="table-responsive"> <table class="table"> ... </table> </div>
Bạn cũng có thể quyết định khi nào bảng sẽ có thanh cuộn, tùy thuộc vào chiều rộng màn hình:
| Class | Screen width |
|---|---|
.table-responsive-sm | < 576px |
.table-responsive-md | < 768px |
.table-responsive-lg | < 992px |
.table-responsive-xl | < 1200px |
Ví dụ
<div class="table-responsive-sm"> <table class="table"> ... </table> </div>
Tổng kết:
Việc áp dụng các lớp để định dạng cho bảng trong Bootstrap 4 rất dễ dàng phải không nào? Lý thuyết chỉ có thế cái bạn cần là vận dụng linh hoạt chúng. Chúc các bạn thành công!
