Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS. Tạo kiểu cho bảng với CSSBảng thường được sử dụng để hiển thị dữ liệu dạng bảng, chẳng hạn như báo cáo tài chính. Nhưng khi bạn tạo một bảng HTML mà không có bất kỳ định dạng tùy chỉnh nào, các trình duyệt sẽ hiển thị chúng mà không có bất kỳ đường viền nào. Với CSS, bạn có thể cải thiện đáng kể diện mạo bảng của mình. CSS cung cấp một số thuộc tính cho phép bạn kiểm soát bố cục và cách trình bày của các thành phần trong bảng. Trong phần sau, bạn sẽ thấy cách sử dụng CSS để tạo các bảng thanh lịch và nhất quán. Tạo đường viền cho bảngThuộc tính Ví dụ sau đây sẽ tạo một đường viền màu đen cho các thẻ
Theo mặc định, trình duyệt vẽ một đường viền xung quanh bảng, cũng như xung quanh tất cả các ô, với một khoảng trống ở giữa, dẫn đến đường viền kép. Để loại bỏ vấn đề đường viền kép này, bạn chỉ cần thu gọn các đường viền các ô liền kề và tạo các đường viền đơn. Hãy xem hình minh họa sau đây để hiểu cách áp dụng một đường viền cho một bảng. Thu gọn đường viền bảngCó hai mô hình để tạo đường viền trên các ô bảng trong CSS: tách biệt và thu gọn. Trong mô hình đường viền riêng biệt, là mặc định, mỗi ô trong bảng có các đường viền riêng biệt, trong khi trong mô hình đường viền thu gọn, các ô bảng liền kề chia sẻ một đường viền chung. Bạn có thể chọn mô hình đường viền cho bảng HTML bằng cách sử dụng thuộc tính Các quy tắc kiểu sau sẽ thu gọn đường viền cho bảng và áp dụng đường viền màu đen 1 pixel.
Lưu ý: Bạn cũng có thể loại bỏ các khoảng trống giữa các ô trong bảng bằng cách gán giá trị của thuộc tính Điều chỉnh không gian bên trong bảngTheo mặc định, trình duyệt tạo các ô trong bảng vừa đủ lớn để chứa dữ liệu trong các ô. Để thêm không gian giữa nội dung bên trong ô bảng và đường viền ô, bạn chỉ cần sử dụng thuộc tính
Bạn cũng có thể điều chỉnh khoảng cách giữa các đường viền của các ô bằng cách sử dụng thuộc tính Ví dụ sau áp dụng khoảng cách 10 pixel giữa tất cả các đường viền trong bảng:
Đặt chiều rộng và chiều cao của bảngTheo mặc định, một bảng sẽ hiển thị vừa đủ rộng và đủ cao để chứa tất cả nội dung của nó. Tuy nhiên, bạn cũng có thể đặt chiều rộng và chiều cao của bảng cũng như các ô của bảng một cách rõ ràng bằng cách sử dụng thuộc tính
Kiểm soát bố cục bảngMột bảng sẽ tự động co dãn để chứa dữ liệu bên trong nó. Đây là hành vi mặc định. Khi dữ liệu lấp đầy bên trong bảng, nó tiếp tục mở rộng miễn là có không gian. Tuy nhiên, đôi khi cần phải đặt chiều rộng cố định cho bảng để quản lý bố cục. Bạn có thể làm điều này với sự trợ giúp của thuộc tính
Ví dụ sau chỉ định rằng bảng HTML được bố trí bằng cách sử dụng thuật toán bố cục cố định và có chiều rộng cố định là 300 pixel. Hãy dùng thử và xem nó hoạt động như thế nào:
Mẹo: Bạn có thể tối ưu hóa hiệu suất hiển thị bảng bằng cách chỉ định giá trị Lưu ý: Không nên sử dụng giá trị Căn chỉnh văn bản bên trong ô bảngBạn có thể căn chỉnh nội dung văn bản bên trong các ô của bảng theo chiều ngang hoặc chiều dọc. Căn chỉnh văn bản theo chiều ngang của ôĐể căn chỉnh văn bản theo chiều ngang bên trong các ô của bảng, bạn có thể sử dụng thuộc tính Ví dụ sau sẽ căn trái văn bản bên trong các phần tử
Lưu ý: Văn bản bên trong các phần tử Căn chỉnh văn bản theo chiều dọc của ôTương tự, bạn có thể căn chỉnh nội dung theo chiều dọc bên trong các phần tử Ví dụ sau sẽ căn chỉnh theo chiều dọc văn bản bên trong các phần tử
Kiểm soát vị trí của chú thích bảngBạn có thể đặt vị trí của chú thích bảng bằng thuộc tính Chú thích có thể được đặt ở đầu hoặc cuối bảng. Vị trí mặc định là ở đầu bảng.
Mẹo: Để thay đổi căn chỉnh theo chiều ngang của chú thích bảng (ví dụ: trái hoặc phải), bạn có thể chỉ cần sử dụng thuộc tính
Xử lý ô trốngTrong các bảng sử dụng mô hình đường viền riêng biệt, là mô hình mặc định, bạn cũng có thể kiểm soát việc hiển thị các ô không có nội dung hiển thị bằng thuộc tính Thuộc tính này chấp nhận một trong hai giá trị là
Lưu ý: Đặt một ký tự khoảng trắng ( Tạo bảng có sọcĐặt các màu nền khác nhau luân phiên cho các hàng là một kỹ thuật phổ biến để cải thiện khả năng đọc của các bảng có lượng dữ liệu lớn. Điều này thường được gọi là bảng có sọc (striped table). Bạn có thể đơn giản đạt được hiệu ứng này bằng cách sử dụng bộ chọn pseudo-class Ví dụ sau sẽ tô màu nền cho mọi hàng lẻ trong bảng.
Một bảng sọc thường trông giống như hình sau. Lưu ý: Bộ chọn pseudo-class Tạo bảng responsiveMặc định thì bảng không responsive. Tuy nhiên, để hỗ trợ thiết bị di động, bạn có thể thêm khả năng phản hồi cho bảng của mình bằng cách bật tính năng cuộn ngang trên màn hình nhỏ. Để thực hiện việc này, chỉ cần bọc bảng của bạn bằng một phần tử
Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gianBạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web. CSS • CSS3 |