Bài viết này giải thích các phương pháp thay đổi màu nền của các phần của bảng trên trang web
Phương thức cũ hơn sử dụng thuộc tính bgcolor để thay đổi màu nền của bảng. Nó cũng có thể được dùng để thay đổi màu của một hàng trong bảng hoặc một ô trong bảng. Nhưng thuộc tính bgcolor không được dùng trong biểu định kiểu, vì vậy đây không phải là cách tối ưu để thao tác màu nền của bảng
Cách tốt hơn để thay đổi màu nền là thêm thuộc tính kiểu màu nền vào thẻ bảng, hàng hoặc ô
Ví dụ này thay đổi màu nền của toàn bộ bảng
Để thay đổi màu của một hàng, hãy chèn thuộc tính màu nền vào
thẻ.Bạn có thể thay đổi màu của một ô bằng cách thêm thuộc tính vào
thẻ.Bạn cũng có thể áp dụng màu nền cho đầu bảng hoặc
Thay đổi màu nền bằng Style Sheets
Tuy nhiên, tốt hơn hết là tránh sử dụng thuộc tính màu nền để sử dụng biểu định kiểu được định dạng chính xác. Ví dụ: bạn có thể đặt kiểu trong biểu định kiểu ở ĐẦU tài liệu HTML hoặc đặt chúng trong biểu định kiểu bên ngoài. Những thay đổi như thế này trong HEAD hoặc biểu định kiểu bên ngoài có thể xuất hiện như thế này đối với bảng, hàng và ô
table { background-color: #ff0000; }
tr { background-color: yellow; }
td { background-color: #000; }
Đặt màu nền cột
Cách tốt nhất để đặt màu nền cho cột là tạo một lớp kiểu rồi gán nó cho các ô của cột. Tạo một lớp cho phép bạn gán lớp đó cho các ô trong một cột cụ thể bằng một thuộc tính
CSS
td.ColColor { background-color: blue; }
HTML
cell 1cell 2cell 1cell 2
Một lợi thế đáng kể của việc kiểm soát màu nền thông qua biểu định kiểu là bạn có thể thay đổi lựa chọn màu của mình sau này. Thay vì xem qua tài liệu HTML và thực hiện thay đổi đối với từng ô đơn lẻ, bạn có thể thực hiện một thay đổi duy nhất đối với lựa chọn màu trong CSS. Thay đổi này sẽ ngay lập tức được áp dụng cho mọi trường hợp xuất hiện cú pháp class="ColColor"
Mặc dù xen kẽ CSS vào HTML của bạn hoặc gọi một tệp CSS riêng biệt, thêm một chút chi phí quản trị ngoài việc sửa đổi một thuộc tính HTML, bạn sẽ thấy rằng việc dựa vào CSS giúp giảm lỗi, tăng tốc độ phát triển và cải thiện tính di động của tài liệu của bạn
Trích dẫn bài viết này
Định dạng
mla apa chicagotrích dẫn của bạn
Kyrnin, Jennifer. "Thay đổi màu nền của bảng HTML. "ThinkCo. https. //www. suy nghĩ. com/change-table-background-color-3469869 [truy cập ngày 30 tháng 11 năm 2022]
Ghi chú. Nếu bạn sử dụng [odd]
thay vì [even]
, kiểu dáng sẽ xuất hiện trên hàng 1,3,5, v.v. thay vì 2,4,6, v.v.
Bảng HTML - Sọc ngựa vằn dọc
Để tạo sọc ngựa vằn dọc, hãy tạo kiểu cho mọi cột khác, thay vì mọi hàng khác
1234567891011121314151617181920Đặt :nth-child[even]
cho các phần tử dữ liệu bảng như thế này
Thí dụ
td. con thứ n[chẵn], thứ. con thứ n[thậm chí] {
màu nền. #D6EEEE;
}
Ghi chú. Đặt bộ chọn :nth-child[]
trên cả hai phần tử th
và td
nếu bạn muốn có kiểu dáng trên cả tiêu đề và ô bảng thông thường
Kết hợp sọc ngựa vằn dọc và ngang
Bạn có thể kết hợp kiểu dáng từ hai ví dụ trên và bạn sẽ có các sọc trên mọi hàng khác và mọi cột khác
Nếu bạn sử dụng màu trong suốt, bạn sẽ có hiệu ứng chồng lấp
Sử dụng màu rgba[]
để chỉ định độ trong suốt của màu
Thí dụ
tr. con thứ n[thậm chí] {
màu nền. rgb[150, 212, 212, 0. 4];
}
th. con thứ n[thậm chí],td. con thứ n[thậm chí] {
màu nền. rgb[150, 212, 212, 0. 4];
}
dải phân cách ngang
Tên HọTiết kiệmPeterGriffin$100LoisGriffin$150JoeSwanson$300Nếu bạn chỉ định đường viền ở dưới cùng của mỗi hàng trong bảng, bạn sẽ có một bảng với các đường phân chia theo chiều ngang
Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng, hãy sử dụng thuộc tính
td.ColColor { background-color: blue; }0 trên và các phần tửTên HọTiết kiệmPeterGriffin$100LoisGriffin$150JoeSwanson$300
dải phân cách ngang
Tên HọTiết kiệmPeterGriffin$100LoisGriffin$150JoeSwanson$300Thêm thuộc tính
td.ColColor { background-color: blue; }1 vào và cho dải phân cách ngang
Bảng di chuột
Sử dụng bộ chọn
td.ColColor { background-color: blue; }2 để đánh dấu các hàng trong bảng khi di chuột quaTên HọTiết kiệmPeterGriffin$100LoisGriffin$150JoeSwanson$300
Bàn sọc
Tên HọTiết kiệmPeterGriffin$100LoisGriffin$150JoeSwanson$300Đối với các bảng có sọc vằn, hãy sử dụng bộ chọn
td.ColColor { background-color: blue; }3 và thêm
td.ColColor { background-color: blue; }4 vào tất cả các hàng của bảng chẵn [hoặc lẻ]