Bài 6: Bảng (table) trong Boostrap 4

0
411

Xin chào các bạn, bài viết này mình sẽ hướng dẫn các bạn tìm hiểu về các class mẫu để định nghĩa bảng (table) trong Bootstrap 4 nhé.

Bảng trong Boostrap 4 được định nghĩa bằng cách thêm class .table ở phần tử <table>

Bảng cơ bản (basic)

Đầu tiên, để có 1 bảng đơn giản trong Bootstrap 4, các bạn sử dụng class .table trong thẻ <table>, như sau:

Ví dụ:

Kết quả:

Bảng có màu nền cho các <tr>

Bạn có thể định nghĩa màu nền nhạt xen kẽ các dòng chẵn, lẻ bằng cách thêm class .table-striped để giúp người dùng dễ nhìn và nhận biết thông tin khác biệt giữa các dòng trong bảng.

Ví dụ:

Kết quả:

Bảng có đường viền ngăn cách

Để thêm viền bao quanh bảng, bạn có thể thêm class .table-bordered

Bootstrap 4 quy định class này như sau:

Ví dụ:

Kết quả:

Bảng không có viền

Nếu bạn muốn tạo 1 bảng không có viền, kể cả bên trong và bên ngoài, hãy dùng lớp .table-borderless

Ví dụ:

Kết quả:

Hover cho bảng

Hiệu ứng hover là hiệu ứng khi bạn rê chuột lên một phần tử HTML nào đó thì trang trí của phần tử đó sẽ bị thay đổi. Trong bảng, hiệu ứng hover sẽ áp dụng cho các dòng <tr>, khi người dùng rê chuột lên một dòng bất kỳ thì dòng đó sẽ có màu nền màu xám nhạt. Để thêm hiệu ứng hover vào các dòng, bạn có thể thêm lớp .table-hover.

Ví dụ:

Kết quả:

Bảng tối màu (màu đen – dark)

Nếu muốn bảng có màu đen hoặc màu tối, bạn có thể thêm lớp .table-dark, khi đó màu chữ sẽ là màu trắng để độc giả có thể nhìn thấy nội dung.

Ví dụ:

Kết quả:

Bảng theo bối cảnh

Tương tự như định nghĩa bối cảnh màu sắc văn bản ở bài trước, bạn cũng có thể dùng các lớp bối cảnh (Contextual Classes) để định nghĩa màu sắc cho bảng. Các lớp này có thể dùng cho toàn bộ bảng (table), các dòng (tr) hoặc các ô trong bảng (td).

Các bối cảnh như: primary, success, info, warning, secondary, danger, active, light, dark.

Ví dụ:

Trong ví dụ trên, các lớp bối cảnh sử dụng là:

  • .table-primary: màu sắc, chỉ dẫn một hành động quan trọng
  • .table-success: màu xanh lá, chỉ dẫn các hành động tích cực hoặc thành công
  • .table-danger: màu đỏ, chỉ dẫn cảnh báo hoặc hành động nguy hiểm
  • .table-info: màu xanh sáng, chỉ dẫn hành động thông tin
  • .table-warning: màu cam, chỉ dẫn cảnh báo cần chú ý
  • .table-active: màu xám, chỉ dẫn màu xám dùng cho hiệu ứng hover trên dòng hoặc ô của bảng
  • .table-secondary: màu xám, chỉ ra một hành động ít quan trọng
  • .table-light: màu nền xám sáng
  • .table-dark: màu nền tối

Màu sắc ở các cột tiêu đề bảng phần <thead>

Để định nghĩa màu nền và màu chữ cho các cột tiêu đề, bạn có 2 lớp lựa chọn đó là: .thead-dark dùng cho nền tối chữ trắng và .thead-light dùng cho nền xám nhạt và chữ đen.

Ví dụ:

Kết quả:

Bảng có độ rộng các dòng nhỏ

Lớp .table-sm giúp tạo bảng với các dòng hẹp bằng cách thu gọn độ padding giữa các ô chỉ còn 50%.

Bảng reponsive thiết bị

Với nhu cầu thiết kế website đáp ứng trên các kích thước màn hình ở các thiết bị khác nhau (laptop, desktop, tablet, mobile) thì lớp .table-responsive sẽ giúp bảng biểu hiển thị trên tất cả màn hình mà không bị bể giao diện. Hơn nữa, trong quá trình thiết kế website, mình cũng khuyên các bạn nên dùng lớp này để định nghĩa cho bảng biểu.

Lớp .table-responsive sẽ tạo ra một bảng đáp ứng: 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.

Ngoài ra, tùy theo kích thước màn hình, bạn có thể định nghĩa khi nào cần dùng thanh cuộc với 4 lớp:

  • .table-responsive-sm: bé hơn 576px
  • .table-responsive-md: bé hơn 768px
  • .table-responsive-lg: bé hơn 992px
  • .table-responsive-xl: bé hơn 1200px

Sử dụng:

Kết luận

Như vậy bài viết đã nêu cách sử dụng các class để định nghĩa trang trí cho table bảng trong Bootstrap 4, rất nhiều class hỗ trợ đúng không nào. Mời bạn tiếp tục, theo dõi bài viết tiếp theo.

Chúc các bạn học tập tố!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây