Bảng Html td màu văn bản

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 thông 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

Chương trước đã đề cập đến cách thay đổi các kiểu cơ bản của bảng bằng CSS. Trong chương này, chúng ta sẽ cung cấp thêm các kiểu cho các bảng bằng CSS. Sau khi bạn tạo cấu trúc của bảng trong phần đánh dấu, bạn có thể dễ dàng thêm một lớp kiểu để tùy chỉnh giao diện của bảng

Bảng CSS Màu nền

Thuộc tính màu nền CSS cho phép bạn tô màu nền của bảng, hàng và ô

Đoạn mã trên tô màu nền của mỗi hàng là màu xanh lá cây và màu nền trước là màu trắng

Mã nguồn

Cách tô màu hàng cụ thể trong Bảng CSS

Bạn có thể sử dụng tr. nth-child(rownumber) để tô màu một hàng cụ thể trong bảng bằng CSS

Đoạn mã trên chọn 3 hàng từ trên xuống (bao gồm cả hàng đầu bảng) và tô màu nền là xanh lá cây và nền trước là màu trắng

Mã CSS

Đã áp dụng mã CSS này cho Bảng HTML Ví dụ 1

Cách tô màu cột cụ thể trong Bảng CSS

Bạn có thể cung cấp màu nền cho cột cụ thể bằng cách sử dụng td. con thứ n(số cột)

Màu mã trên màu nền của cột đầu tiên là Màu cam

Mã CSS

Đã áp dụng mã CSS này cho Bảng HTML Ví dụ 1

Cách tô màu chỉ ô Bảng CSS

Mã nguồn sau đây cho biết cách tô màu một ô cụ thể trong bảng bằng CSS

Bảng CSS Tô màu hàng thay thế

Bạn có thể sử dụng tr. nth-child(rowOrder) để tạo màu hàng xen kẽ cho Bảng bằng CSS. Thứ tự hàng phải là "lẻ" hoặc "chẵn"

HTML |