Css màu nền thân bảng

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 chicago

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 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;
}

Tự mình thử »

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);
}

Tự mình thử »

---

dải phân cách ngang

Tên HọTiết kiệmPeterGriffin$100LoisGriffin$150JoeSwanson$300

Nế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$300

Thê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 qua

Tê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ẻ)

Làm thế nào bạn có thể tô màu nền của một bảng?

Màu nền mặc định của bảng là gì?