change color of rows in a table in HTML and CSS

Question

Trying to learn HTML and CSS and I have a simple question.

How can I give each row a different color in a table? For example row 1 is red, row 2 is blue etc.

Answer 1

If I understand your question correctly and you want to give every row a different color? You have a few options...

• Add a class to each row and style those.
• Use the direct sibling selector tr + tr
• Use :nth-of-type

table tr {background: red;}
table tr:nth-of-type(2) {background: blue;}
table tr:nth-of-type(3) {background: green;}
table tr:nth-of-type(4) {background: yellow;}
table tr:nth-of-type(5) {background: grey;}

  

    
Company
    
Contact
      
Country
  
  

    
1
    
2
      
3
  
  

    
1
    
2
      
3
  
  

    
1
    
2
      
3
  
  

    
1
    
2
      
3