Làm cách nào để thêm màu nền vào hàng của bảng trong html?

Trong Hướng dẫn CSS này, chúng ta đã học cách sử dụng bộ chọn CSS :hover và thuộc tính background-color để đặt một màu cụ thể cho nền của hàng trong bảng khi di chuột qua nó, cùng với các ví dụ

Trang này chứa mã màu nền của bảng HTML. Đây là các mã HTML để chỉ định hoặc thay đổi màu nền của các bảng trong blog hoặc trang web của bạn

Trong HTML, màu nền của bảng được chỉ định bằng Cascading Style Sheets (CSS). Đặc biệt, bạn sử dụng thuộc tính CSS background-color để đặt màu nền cho bảng của mình. Bạn cũng có thể chỉ định màu nền riêng cho các hàng và ô của bảng nếu muốn

Màu nền cho toàn bộ bảng

Để thay đổi màu nền của toàn bộ bảng, hãy sử dụng thuộc tính background-color đối với thẻ table

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Màu nền của một hàng trong bảng

Để thay đổi màu nền của một hàng trong bảng, bạn áp dụng mã tương tự, nhưng cho hàng trong bảng được đề cập (i. e. thẻ tr)

Ở đây chúng tôi cũng sử dụng border-collapse:collapse; để thu gọn đường viền

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Màu nền của một ô

Để thay đổi màu nền của một ô trong bảng, bạn áp dụng mã tương tự, nhưng cho ô trong bảng được đề cập (i. e. thẻ td hoặc thẻ th, tùy thuộc vào việc ô là hàng dữ liệu bảng bình thường hay là một phần của tiêu đề bảng)

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Sử dụng các lớp

Các ví dụ trên sử dụng biểu định kiểu nội tuyến để đặt thuộc tính CSS. Điều này chỉ vì nó giúp cho mục đích trình diễn dễ dàng hơn. Tôi thực sự khuyến khích bạn sử dụng một lớp CSS được xác định trong biểu định kiểu bên ngoài để đặt kiểu của bạn. Ngay cả các biểu định kiểu được nhúng thường tốt hơn nội tuyến

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

nhãn

Bạn có thể thay đổi màu của một ô bằng cách thêm thuộc tính vào

nhãn

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

Sự sắp xếp

trí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 18 tháng 1 năm 2023)