html: different colors for both row and column of a table

Question

How to write a css code in html code for creating a table like the following:

different colors for both alternative column and row

Many thanks

Answer 1

You can use the CSS-Selector nth-child. This selector selects for example the second row.

table tr:nth-child(2){
     background: red;
}

To have different coloured columns, you can use the following selector. This will color the second column.

tr td:nth-child(2){
    background: red;
}

Source: here

To select a specifig cell use both at one time:

table tr:nth-child(2) td:nth-child(2){
    background: red;
}

More on this Website: https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

You will have to implement so called even and odd rules, such as:

tr:nth-child(even)
tr:nth-child(odd)

Answer 3

the style will be implemented based on td and for red blue rows you can add class to (tr) or you can use nth child with number there on tr : tr:nth-child(6)

tr td:nth-child(even) {background:red;} tr td:nth-child(odd) {background:pink;}

Answer 4

This question has been solved by setting the column in blue and light blue first then use the CSS-selector as the following:

table.tb1 tr:nth-child(10n+0),tr:nth-child(10n+1),tr:nth-child(10n+2),tr:nth-child(10n+3),tr:nth-child(10n+4){background: pink; }  

table.tb1 tr:nth-child(10n+0) td:nth-child(2n+1){background: red;} 
table.tb1 tr:nth-child(10n+1) td:nth-child(2n+1){background: red;} 
table.tb1 tr:nth-child(10n+2) td:nth-child(2n+1){background: red;} 
table.tb1 tr:nth-child(10n+3) td:nth-child(2n+1){background: red;}
table.tb1 tr:nth-child(10n+4) td:nth-child(2n+1){background: red;} 

Thank you very much for helping me!