Hướng dẫn how do you change the background color of a table row in html? - làm cách nào để thay đổi màu nền của một hàng trong bảng trong html?

Tr Bgcolor Is Obsolete: Here's How To Set Table Row Background Color Now

Trong các thuộc tính HTMLHTML Attributes

Tiết lộ: Hỗ trợ của bạn giúp giữ cho trang web hoạt động! Chúng tôi kiếm được một khoản phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Mã ví dụ

  

    
First column
    
Second column
    
Third column
  
  

    
First column
    
Second column
    
Third column
  
  

    
First column
    
Second column
    
Third column
  

Đặt màu nền của các hàng bảng

Thuộc tính

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

Những gì mã đó làm là sử dụng bộ chọn

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

 
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
   
First column
Second column
Third column
 
 

.Example-Table tr: nth-child (2n+1) {màu nền: #ddd;}. Ví dụ Table tr: nth-child (2n+0)

Đặt màu nền của các hàng bảng

Cập nhật vào ngày 31 tháng 1 năm 2021

Những gì để biết

• Dễ nhất: Thêm màu nền thuộc tính kiểu vào bảng, hàng hoặc thẻ di động.background-color to the table, row, or cell tag.
• Tiếp theo dễ nhất: Sử dụng thuộc tính BGColor.bgcolor.

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 pháp 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 sử dụng để thay đổi màu của một hàng bảng & nbsp; hoặc một ô bảng. Nhưng thuộc tính BGColor đã không được ủng hộ trong các bảng phong cách, vì vậy đó không phải là cách tối ưu để thao tác với màu nền của bảng.bgcolor to change the background color of a table. It could also be used to change the color of a table row or a table cell. But the bgcolor attribute has been deprecated in favor of style sheets, so it's not the optimal way to manipulate a table's background color.

Cách tốt hơn để thay đổi màu nền là thêm màu nền của Kiểu vào bảng, hàng hoặc thẻ ô.background-color to the table, row, or cell tag.

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

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

Bạn cũng có thể áp dụng màu nền cho đầu bảng, hoặc & nbsp;

Thay đổi màu nền bằng cách sử dụng các bảng kiểu

Tuy nhiên, tốt hơn là tránh sử dụng thuộc tính màu nền có lợi cho một bảng kiểu được định dạng chính xác. Ví dụ: bạn & nbsp; có thể đặt các kiểu trong một bảng kiểu ở đầu tài liệu HTML của bạn hoặc đặt chúng vào & nbsp; một bảng kiểu bên ngoài. Những thay đổi như thế này trong đầu & nbsp; hoặc một bảng kiểu bên ngoài có thể xuất hiện như thế này đối với các bảng, hàng và ô:

table { background-color: #ff0000; }
tr { background-color: yellow; }
td { background-color: #000; }

Thiết lập màu nền cột

Cách tốt nhất để đặt màu nền cho một cột là tạo một lớp kiểu và sau đó 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::

Một lợi thế đáng kể của việc kiểm soát màu nền thông qua một bảng kiểu là bạn có thể thay đổi lựa chọn màu sắc của mình sau này. Thay vì đi qua tài liệu HTML và thực hiện thay đổi cho mỗi ô, bạn có thể thực hiện một thay đổi duy nhất cho lựa chọn màu trong CSS sẽ được áp dụng ngay lập tức cho mọi trường hợp trong đó xuất hiện cú pháp "colcolor".class="ColColor" syntax appears.

Mặc dù việc xen kẽ CSS vào HTML của bạn hoặc gọi một tệp CSS riêng biệt, nhưng thêm một chút chi phí quản trị ngoài việc sửa đổi thuộc tính HTML, bạn sẽ thấy rằng việc dựa vào CSS sẽ 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.