Sáng tạo bảng (table) trong Bootstrap

Trước khi đi vào chi tiết về cách tạo bảng (table) trong Bootstrap, Mytour sẽ giới thiệu qua về khái niệm của bảng (table).

Hướng dẫn tạo bảng (table) trong Bootstrap

1. Bảng (table) là gì?

Bảng là một cấu trúc HTML được sử dụng để trình bày dữ liệu dưới dạng lưới, với các hàng và cột. Sử dụng Bootstrap, chúng ta có thể tạo bảng một cách dễ dàng và nhanh chóng.

2. Tạo bảng (table) đơn giản trong Bootstrap

Để tạo các bảng đơn giản với các đường chia ngang và khoảng cách giữa nội dung trong ô so với đường viền (mặc định là 8px), chúng ta chỉ cần thêm lớp .table vào phần tử table trong Bootstrap.

Ví dụ: Trong ví dụ dưới đây, chúng ta sẽ tạo một bảng đơn giản:

Kết quả trả về sẽ có dạng như sau:

Ngoài ra, chúng ta cũng có thể tạo bảng với màu văn bản là màu sáng và màu nền là màu tối bằng cách thêm lớp .table-dark vào lớp .table như ví dụ dưới đây:

Kết quả hiển thị sẽ như sau:

Mẹo: Chúng ta có thể thêm lớp .table-dark vào phần tử .table để tạo bảng với màu nền tối.

3. Tạo bảng có các dòng kẻ sọc trong Bootstrap

Để tạo bảng có các dòng kẻ sọc, chúng ta chỉ cần thêm lớp .table-striped trong Bootstrap vào lớp .table.

Để thực hiện điều này, chúng ta chỉ cần thêm thuộc tính background-color vào phần tử tbody thông qua CSS selector :nth-child. Tham khảo ví dụ dưới đây:

Kết quả trả về sẽ có dạng như sau:

Tương tự, để tạo bảng với đường kẻ sọc, có màu nền tối và màu văn bản sáng, chúng ta chỉ cần thêm lớp .table-dark vào bảng như ví dụ dưới đây:

Kết quả trả về sẽ có dạng như sau:

4. Bảng với Đường Viền trong Bootstrap

Để thêm đường viền (border) cho tất cả các ô trong bảng, chúng ta chỉ cần thêm lớp .table-bordered của Bootstrap vào lớp .table.

Ví dụ: trong ví dụ dưới đây, chúng ta thêm đường viền cho tất cả các ô trong bảng bằng cách áp dụng lớp .table-bordered của Bootstrap vào lớp .table:

Kết quả trả về sẽ có dạng như sau:

5. Bảng không Đường Viền trong Bootstrap

Để tạo các bảng không có đường viền trong Bootstrap, chúng ta chỉ cần thêm lớp .table-borderless vào phần tử .table.

Ví dụ: trong ví dụ dưới đây, chúng ta sẽ tạo các bảng không có đường viền trong Bootstrap:

Kết quả trả về sẽ có dạng như sau sau khi thêm lớp .table-borderless vào phần tử .table:

6. Kích Hoạt Trạng Thái Hover trên Các Hàng trong Bảng

Chúng ta cũng có thể kích hoạt trạng thái hover (khi di chuột) trên các hàng trong phần tử tbody bằng cách thêm lớp .table-hover trong Bootstrap vào lớp .table.

Ví dụ: trong ví dụ dưới đây, chúng ta kích hoạt trạng thái hover trên các hàng trong bảng:

Kết quả trả về sẽ có dạng như sau:

7. Tạo Bảng Thu Gọn hoặc Bảng Nhỏ

Để tạo bảng thu gọn, tiết kiệm không gian trống, chúng ta chỉ cần thêm lớp .table-sm vào lớp .table. Lớp .table-sm tạo bảng thu gọn bằng cách cắt một nửa khoảng cách giữa nội dung trong ô so với đường viền.

Ví dụ: trong ví dụ dưới đây chúng ta tạo các bảng nhỏ trong Bootstrap:

Kết quả trả về có dạng như dưới đây:

8. Đặt Màu Cho Tiêu Đề Bảng

Để chỉ định màu nền khác nhau cho tiêu đề bảng, chúng ta sử dụng các lớp .thead-light hoặc .thead-dark trên phần tử thead.

Ví dụ 1: trong ví dụ dưới đây chúng ta sử dụng lớp .thead-light để tạo bảng:

Kết quả trả về có dạng như dưới đây:

Ví dụ 2: dưới đây là ví dụ sử dụng lớp .thead-dark để tạo bảng:

Kết quả trả về sẽ giống như sau:

9. Tuỳ Chỉnh Các Ô, Hàng Trong Bảng

Để làm nổi bật dữ liệu trong các ô, hàng trong bảng, chúng ta chỉ cần thay đổi màu nền của chúng.

Ví dụ: xem ví dụ dưới đây:

Kết quả sẽ hiển thị như sau:

10. Tạo Bảng Đáp Ứng Trong Bootstrap

Nếu cần, chúng ta có thể tạo các bảng đáp ứng để cho phép cuộn ngang trên các thiết bị màn hình nhỏ.

Để tạo bảng đáp ứng, hãy đặt bảng trong một thẻ div và thêm lớp .table-responsive. Đồng thời, bạn có thể điều chỉnh việc hiển thị thanh cuộn trên các thiết bị với các lớp .table-responsive{-sm|-md|-lg|-xl}.

Ví dụ: trong ví dụ sau đây, chúng ta tạo một bảng đáp ứng:

Kết quả sẽ hiển thị như sau:

Trong bài học này, Mytour đã hướng dẫn cách tạo bảng trong Bootstrap. Nếu bạn có thắc mắc hoặc câu hỏi, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết.

Trong bài học kế tiếp, Mytour sẽ chia sẻ với bạn cách thực hiện danh sách trong Bootstrap.