Trong Bootstrap 4 sẽ có một số class cho bảng, tùy thuộc vào việc bạn muốn tạo bảng như thế nào, bảng cơ bản, có viền/không viền, các hàng trong bảng được tô màu xen kẽ… mà sẽ sử dụng class tương ứng với nhu cầu.
Bài hướng dẫn về bảng trong Bootstrap dưới đây sẽ liệt kê các class được dùng cho bảng đi kèm với ví dụ minh họa để bạn dễ hình dung ra cách sử dụng và kết quả mà từng class mang lại.
Bạn cũng sẽ biết cách để tô màu nền cho bảng, hàng khá là chi tiết.
Cách tạo bảng với Bootstrap
Bảng cơ bản
Bảng cơ bản trong Bootstrap 4 sẽ có một chút padding và dải phân cách ngang. Class .table thêm kiểu cơ bản vào bảng như ví dụ dưới đây.
Bảng cơ bản
Class .table class thêm kiểu cơ bản cho bảng, 1 chút padding và dòng kẻ ngang:
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Code trên sẽ cho ra bảng như sau:
Tô màu hàng xen kẽ
Nếu bạn muốn làm cho các hàng trong bảng dễ đọc hơn bằng cách tô màu xen kẽ cho chúng thì chỉ cần sử dụng thêm class .table-striped như ví dụ dưới đây:
Bảng màu xen kẽ
Class .table-striped thêm màu xen kẽ cho các hàng trong bảng:
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Bảng có hàng được tô màu xen kẽ sẽ như thế này:
Thêm đường viền cho bảng
Nếu bạn muốn thêm đường viền cho mọi ô trong bảng thì chỉ cần sử dụng class .table-bordered như sau:
Thêm viền cho bảng
Class .table-bordered sẽ thêm viền cho mọi ô trong bảng:
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Bảng với class .table-bordered sẽ như sau:
Hàng đổi màu khi di chuột
Để thêm hiệu ứng đổi màu khi di chuột vào hàng thì bạn sử dụng class .table-hover. Khi đó các hàng trong bảng được di chuột qua sẽ có màu nền chuyển sang màu xám, như ví dụ dưới đây:
Hàng đổi màu khi di chuột qua
Class .table-hover sẽ chỉ ra hàng nào đang được di chuột, bằng cách thêm màu nền xám cho hàng:
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Khi bạn di chuột qua hàng, hàng sẽ được tô màu như hình dưới đây:
Bảng tối màu, màu đen
Nếu bạn muốn bảng của mình có nền màu đen, chữ màu trắng thì hãy dùng class .table-dark như dưới đây:
Bảng nền đen
Class .table-dark sẽ thêm nền đen cho bảng:
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Bảng có nền đen sẽ như thế này:
Bảng nền đen và đổi màu khi di chuột
Khá đơn giản, để tạo ra bảng dạng này bạn chỉ cần sử dụng kết hợp 2 class là .table-dark và .table-hover, khi đó hàng nào được di chuột qua sẽ chuyển sang nền xám như trong ví dụ dưới đây:
Bảng nền đen đổi màu khi di chuột
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Chạy code trên sẽ cho ra bảng như này:
Tạo bảng không viền trong Bootstrap
Class .table-borderless sẽ loại bỏ tất cả đường viền bao quanh các ô của bảng, hãy thử ví dụ dưới đây để xem kết quả:
Bảng không viền
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Bảng được tạo ra sẽ không có viền nào cả:
Bảng theo ngữ cảnh
Các class ngữ cảnh được sử dụng để tô màu cho toàn bộ bảng
| . Chúng bao gồm: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light và .table-dark. |
Nếu đã tìm hiểu về color trong Bootstrap ở bài trước, bạn sẽ nhận thấy các class này rất quen thuộc đúng không?
Bảng đổ màu theo ngữ cảnh
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Trần
Bo
26
Nguyễn
Hưng
31
Nguyễn
Hồng
30
Phạm
AB
22
Phạm
C
29
Nguyễn
D
15
Nguyễn
E
21
Tô màu bảng theo ngữ cảnh:
Các class ngữ cảnh có thể được sử dụng và màu sắc tương ứng của chúng:
| Class | Mô tả |
|---|---|
| .table-primary | Màu xanh da trời: Chỉ hành động quan trọng. |
| .table-success | Xanh lá: Biểu thị một hành động thành công hoặc tích cực. |
| .table-danger | Đỏ: Biểu thị một hành động nguy hiểm hoặc có khả năng tiêu cực. |
| .table-info | Xanh nhạt: Chỉ hành động hoặc sự thay đổi thông tin trung tính. |
| .table-warning | Cam: Chỉ cảnh báo cần chú ý. |
| .table-active | Xám: Áp dụng màu khi di chuột cho hàng hoặc ô. |
| .table-secondary | Xám: Chỉ hành động ít quan trọng. |
| .table-light | Màu nền xám nhạt cho bảng hoặc hàng. |
| .table-dark | Màu nền xám đậm cho bảng hoặc hàng. |
Tô màu cho tiêu đề bảng
Class .thead-dark thêm nền đen, class .thead-light thêm nền xám cho hàng tiêu đề của bảng.
Tô màu hàng tiêu đề
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Hàng tiêu đề được tô màu trông sẽ như thế này:
Tạo bảng nhỏ
Class .table-sm tạo ra bảng nhỏ hơn bằng cách giảm một nửa padding của ô:
Tạo bảng nhỏ
Họ
Tên
Tuổi
Nguyễn
Jolie
25
Trần
Hòa
26
Cao
Duyên
27
Bảng được giảm bớt padding và trông sẽ như thế này:
Bảng thích ứng
Class .table-responsive sẽ thêm thanh cuộn cho bảng khi cần, thường là khi chiều rộng của bảng lớn hơn chiều rộng của màn hình hiển thị.
...
Ví dụ như sau:
Bảng thích ứng
#
Họ
Tên
Tuổi
Thành Phố
Đất nước
Giới tính
A
B
C
D
E
F
G
H
I
K
L
M
1
Nguyễn
Ngọc
35
Tiền Giang
Việt Nam
Nam
Nam
Nam
Nam
Nam
Nam
Nam
Nam
Nam
Nam
Nam
Nam
Nam
Khi bảng rộng hơn so với màn hình xem, bạn sẽ thấy có thanh cuộn ngang ở dưới bảng như hình:
Bạn có thể quyết định khi nào thì cần thêm thanh cuộn vào bảng, dựa vào độ rộng màn hình:
| Class | Độ rộng màn hình |
|---|---|
| .table-responsive-sm | < 576px |
| .table-responsive-md | < 768px |
| .table-responsive-lg | < 992px |
| .table-responsive-xl | < 1200px |
Bài trước: Color trong Bootstrap
Nguồn: https://quantrimang.com/bang-trong-bootstrap-173533
![[Video] Xuất hiện iPhone SE 2 có thiết kế gần giống như iPhone X](https://sudungmaytinh.com/media/uploads/2024/04/phone-se-2-570x292.jpg)
