Bài học Bootstrap trước Taimienphi. vn đã giới thiệu cho bạn về Typography trong Bootstrap. Trong bài học tiếp theo bên dưới Taimienphi. vn sẽ giới thiệu tiếp cho bạn cách tạo bảng trong Bootstrap, tạo (bảng) nhé Trước khi đi vào chi tiết các bước tạo bảng (table) trong Bootstrap, Taimienphi. vn will giới thiệu cho bạn về bảng (table)  1. Table (bảng) là gì? Bảng trong HTML được sử dụng để trình bày dữ liệu dưới dạng lưới, chẳng hạn như hàng và cột. Bằng cách sử dụng Bootstrap, chúng ta có thể tạo các 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 có 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 in Bootstrap in the element table 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ề có dạng như dưới đây Ngoài ra, chúng ta cũng có thể tạo bảng trong đó 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 bổ sung thêm lớp. table-dark vào lớp. bảng như trong ví dụ dưới đây Kết quả trả về có dạng như dưới đây mẹo. chúng ta có thể thêm lớp. table-dark into the element. bảng để tạo bảng có màu nền tối 3. Tạo bảng có các đường kẻ trộm trong Bootstrap Để tạo bảng có các đường kẻ quét, chúng ta chỉ cần thêm lớp. table-striped trong Bootstrap vào lớp. bàn Để làm được điều này, chỉ cần thêm màu nền vào phần tử tbody thông qua bộ chọn CSS. con thứ n. Tham khảo ví dụ dưới đây Kết quả trả về có dạng như dưới đây Tương tự để tạo bả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ề có dạng như dưới đây 4. Tạo bảng có đường viền trong Bootstrap Để thêm đường viền (đường viền) cho tất cả các ô trong bảng, chúng ta chỉ cần thêm lớp. table-bordered trong Bootstrap vào lớp. bàn 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 thêm lớp. table-bordered trong Bootstrap vào lớp. bàn Kết quả trả về có dạng như dưới đây 5. Tạo bảng không có đườ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 on the element. bàn 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ề sau khi thêm lớp. table- Borderless on the element. bảng có dạng như dưới đây 6. Kích hoạt Hover State trên các hàng trong bảng Ngoài ra, chúng ta có thể kích hoạt trạng thái di chuột (chỉ 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. bàn Ví dụ. trong ví dụ dưới đây chúng ta kích hoạt trạng thái di chuột trên các hàng trong bảng Kết quả trả về có dạng như dưới đây 7. Tạo các bảng thu nhỏ hoặc bảng thu gọn Để tạo các bảng thu nhỏ, tiết kiệm không gian trống, chúng ta chỉ cần thêm lớp. table-sm to layer. bàn. Class. 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. Thiết lập màu cho bảng tiêu đề Để chỉ định màu nền khác nhau cho bảng tiêu đề, chúng ta sử dụng các lớp. đèn pha hoặc. thead-dark on thead section Ví dụ 1. trong ví dụ dưới đây chúng ta sử dụng lớp. thead-light to create table Kết quả trả về có dạng như dưới đây Ví dụ 2. trong ví dụ dưới đây chúng ta sử dụng lớp. thead-dark to create table Kết quả trả về có dạng như dưới đây 9. Tùy chỉnh các ô, hàng trong bảng Để nhấn mạnh các dữ liệu trong các ô, hàng trong bảng, chúng ta chỉ cần đổ màu nền cho các ô, hàng này Ví dụ. tham khảo ví dụ dưới đây Kết quả trả về có dạng như dưới đây 10. Tạo các bảng trả lời trong Bootstrap Ngoài ra, nếu muốn chúng ta có thể tạo các bảng trả lời, cho phép cuộn ngang trên các thiết bị có kích thước màn hình nhỏ Để tạo các bảng trả lời, chỉ cần đặt bảng bên trong phần tử div và áp dụng lớp. table-responsive trong đó. Ngoài ra, chúng ta có thể chỉ định khi bất kỳ bảng nào hiển thị thanh cuộn dựa trên chiều rộng màn hình của thiết bị bằng cách sử dụng các lớp. đáp ứng bảng {-sm. -md. -lg. -xl} Ví dụ. trong ví dụ dưới đây, chúng ta tạo một bảng trả lời Kết quả trả về có dạng như dưới đây Bài học trên Taimienphi đây. vn vừa hướng dẫn bạn bài học Bootstrap với cách tạo bảng (table) trong Bootstrap. Ngoài ra nếu có bất kỳ thắc mắc hay câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận dưới bài viết nhé! |
