CSS có thể được sử dụng như thế nào để tạo kiểu cho bảng?
Nhưng khi bạn tạo một bảng HTML không có bất kỳ kiểu hoặc thuộc tính nào, 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 của bảng Show
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 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 Thêm viền vào bảngThuộc tính CSS 2 là cách tốt nhất để xác định đường viền cho bảngVí dụ sau sẽ đặt viền đen cho thuộc tính 3Các quy tắc kiểu sau sẽ thu gọn viền ô của bảng và áp dụng viền đen một pixel
Ghi chú. Bạn cũng có thể loại bỏ khoảng cách giữa các đường viền ô của bảng thông qua việc đặt giá trị của thuộc tính CSS 4 thành 0. Tuy nhiên nó chỉ xóa khoảng trắng chứ không gộp viền như khi bạn set 5 thành 6Điều chỉnh không gian bên trong bảngTheo mặc định, trình duyệt tạo các ô của bảng vừa đủ lớn để chứa dữ liệu trong các ô Để thêm khoảng trống giữa nội dung ô của bảng và đường viền ô, bạn chỉ cần sử dụng thuộc tính CSS 7. Hãy thử ví dụ sau và xem nó hoạt động như thế nào
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 CSS 4, nếu các đường viền của bảng của bạn được phân tách (là mặc định)Các quy tắc kiểu 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 CSS 9 và 0. Quy tắc kiểu trong ví dụ sau sẽ đặt chiều rộng của bảng thành 100% và chiều cao của các ô tiêu đề bảng thành 40px 2Kiểm soát bố cục bảngMột bảng mở rộng và co lại để chứa dữ liệu chứa 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ó sẽ tiếp tục mở rộng miễn là còn chỗ trống. Tuy nhiên, đôi khi cần đặ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 CSS 1. Thuộc tính này xác định thuật toán được sử dụng để bố trí các ô, hàng và cột của bảng. Thuộc tính này nhận một trong hai giá trị
Các quy tắc kiểu trong ví dụ sau xác định rằng bảng HTML được trình bày 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 4Mẹo. Bạn có thể tối ưu hóa hiệu suất kết xuất bảng bằng cách chỉ định giá trị 2 cho thuộc tính 1. Giá trị cố định của thuộc tính này làm cho bảng được hiển thị một hàng tại một thời điểm, cung cấp cho người dùng thông tin với tốc độ nhanh hơnGhi chú. Nếu không có giá trị 2 của thuộc tính 1 trên các bảng lớn, người dùng sẽ không thấy bất kỳ phần nào của bảng cho đến khi trình duyệt hiển thị toàn bộ bảngCăn chỉnh văn bản bên trong các ô của 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 ngang nội dung ôĐể 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 6 giống như cách bạn sử dụng với các phần tử khác. Bạn căn chỉnh văn bản sang trái, phải, giữa hoặc căn đềuCác quy tắc kiểu sau sẽ căn trái văn bản bên trong yếu tố 0Ghi chú. Văn bản bên trong các phần tử được căn trái theo mặc định, trong khi văn bản bên trong các phần tử được căn giữa và hiển thị bằng phông chữ đậm theo mặc địnhCăn dọc nội dung ôTương tự, bạn có thể căn chỉnh theo chiều dọc nội dung bên trong và các phần tử lên trên cùng, dưới cùng hoặc ở giữa bằng cách sử dụng thuộc tính CSS 7. Căn dọc mặc định là ở giữaCác quy tắc kiểu sau đây sẽ căn chỉnh dưới cùng theo chiều dọc văn bản bên trong yếu tố 2Kiểm soát vị trí của chú thích bảngBạn có thể đặt vị trí dọc của chú thích bảng bằng thuộc tính CSS 8Chú thích có thể được đặt ở đầu hoặc cuối bảng. Vị trí mặc định là trên cùng 4Mẹo. Để thay đổi căn ngang của văn bản chú thích của bảng (e. g. trái hoặc phải), bạn có thể chỉ cần sử dụng thuộc tính CSS 6, giống như bạn làm với văn bản bình thườngXử lý các ô 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 CSS 0Thuộc tính này chấp nhận giá trị của 1 hoặc 2. Giá trị mặc định là 1, sẽ hiển thị các ô trống giống như các ô bình thường, nhưng nếu giá trị 2 được chỉ định thì không có đường viền hoặc nền nào được vẽ xung quanh các ô trống. Hãy thử một ví dụ để hiểu nó thực sự hoạt động như thế nào 1Ghi chú. Đặt một khoảng trắng không ngắt (_______95) bên trong một ô của bảng làm cho nó không trống. Do đó, ngay cả khi ô đó trông trống rỗng, giá trị 2 sẽ không ẩn đường viền và nềnTạo bảng sọc vằnĐặt các màu nền khác nhau cho các hàng thay thế 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à sọc ngựa vằn trên bàn Bạn chỉ có thể đạt được hiệu ứng này bằng cách sử dụng bộ chọn lớp giả CSS 7Các quy tắc kiểu sau sẽ đánh dấu mọi hàng lẻ trong phần thân bảng 0Một bảng sọc ngựa vằn thường trông giống như hình ảnh sau đây Ghi chú. Lớp giả 7 chọn các phần tử dựa trên vị trí của chúng trong một nhóm anh chị em. Nó có thể lấy một số, một từ khóa chẵn hoặc lẻ hoặc một biểu thức có dạng xn+y trong đó x và y là các số nguyên (e. g. 1n, 2n, 2n+1,. ) như một đối sốTạo một bảng đáp ứngCác bảng không đáp ứng trong tự nhiên. Tuy nhiên, để hỗ trợ các thiết bị di động, bạn có thể thêm khả năng phản hồi cho các bảng của mình bằng cách cho phép cuộn ngang trên màn hình nhỏ. Để làm điều này, chỉ cần bọc bàn của bạn bằng một Làm cách nào chúng ta có thể tạo kiểu cho bảng bằng cách giải thích CSS?điều kiện tiên quyết Setting Up the |