在HTML和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.

This is my HTML code:

 #table { font-family: Arial, Helvetica, sans-serif; width: 600px; border-collapse; collapse; } #table td, #table th { font-size: 12x; border: 1px solid #4D365B; padding: 3px 7px 2px 7px; } #table th { font-size: 14px; text-align: left; padding-top: px; padding-bottom: 4px; background-color: #4D365B; color: #918CB5; } #table td { color: #000000; background-color: #979BCA; } 

 <table id="table"> <tr> <th>Company</th> <th>Contact <th>Country</th> </tr> <tr> <td>1</td> <td>2 <td>3</td> </tr> <tr> <td>1</td> <td>2 <td>3</td> </tr> <tr> <td>1</td> <td>2 <td>3</td> </tr> </table> 

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

 <table id="table"> <tr> <th>Company</th> <th>Contact <th>Country</th> </tr> <tr> <td>1</td> <td>2 <td>3</td> </tr> <tr> <td>1</td> <td>2 <td>3</td> </tr> <tr> <td>1</td> <td>2 <td>3</td> </tr> <tr> <td>1</td> <td>2 <td>3</td> </tr> </table> 

Answer 2

You can also try like this

 #table tr{background: red;} #table tr:nth-child(2n+1){background: blue;} #table { font-family: Arial, Helvetica, sans-serif; width:600px; border-collapse;collapse; #table td, #table th { font-size:12x; border:1px solid #4D365B; padding: 3px 7px 2px 7px; #table th { font-size:14px; text-align:left; padding-top:px; padding-bottom:4px; background-color:#4D365B; color:#918CB5; #table td { color:#000000; background-color:#979BCA; } 

 <table id="table"> <tr><th> Company</th><th>Contact<th>Country</th></tr> <tr><td> 1</td><td>2<td> 3</td></tr> <tr><td> 1</td><td>2<td> 3</td></tr> <tr><td> 1</td><td>2<td> 3</td></tr> 

Answer 3

This can be done easily using pseudo selectors nth-child .

 #table tr:nth-child(odd){background:red} #table tr:nth-child(even){background:blue} 

 <table id="table"> <tr><th> Company</th><th>Contact<th>Country</th></tr> <tr><td> 1</td><td>2<td> 3</td></tr> <tr><td> 1</td><td>2<td> 3</td></tr> <tr><td> 1</td><td>2<td> 3</td></tr> </table> 

Answer 4

 tr:nth-child(even) { background: #ff0101; } tr:nth-child(odd) { background: #0030ff; } 

 <table class="ex1"> <tbody> <tr> <th>Month </th> <th>'94 </th> <th>'95 </th> <th>'96 </th> <th>'97 </th> <th>'98 </th> <th>'99 </th> <th>'00 </th> <th>'01 </th> <th>'02 </th> </tr> <tr> <td>Jan </td> <td>14 </td> <td>13 </td> <td>14 </td> <td>13 </td> <td>14 </td> <td>11 </td> <td>11 </td> <td>11 </td> <td>11 </td> </tr> <tr> <td>Feb </td> <td>13 </td> <td>15 </td> <td>12 </td> <td>15 </td> <td>15 </td> <td>12 </td> <td>14 </td> <td>13 </td> <td>13 </td> </tr> <tr> <td>Mar </td> <td>16 </td> <td>15 </td> <td>14 </td> <td>17 </td> <td>16 </td> <td>15 </td> <td>14 </td> <td>15 </td> <td>15 </td> </tr> <tr> <td>Apr </td> <td>17 </td> <td>16 </td> <td>17 </td> <td>17 </td> <td>17 </td> <td>15 </td> <td>15 </td> <td>16 </td> <td>16 </td> </tr> <tr> <td>May </td> <td>21 </td> <td>20 </td> <td>20 </td> <td>21 </td> <td>22 </td> <td>20 </td> <td>21 </td> <td>20 </td> <td>19 </td> </tr> <tr> <td>Jun </td> <td>24 </td> <td>23 </td> <td>25 </td> <td>24 </td> <td>25 </td> <td>23 </td> <td>25 </td> <td>23 </td> <td>24 </td> </tr> <tr> <td>Jul </td> <td>29 </td> <td>28 </td> <td>26 </td> <td>26 </td> <td>27 </td> <td>26 </td> <td>25 </td> <td>26 </td> <td>25 </td> </tr> <tr> <td>Aug </td> <td>29 </td> <td>28 </td> <td>27 </td> <td>28 </td> <td>28 </td> <td>27 </td> <td>26 </td> <td>28 </td> <td>26 </td> </tr> <tr> <td>Sep </td> <td>24 </td> <td>23 </td> <td>23 </td> <td>26 </td> <td>24 </td> <td>24 </td> <td>24 </td> <td>22 </td> <td>21 </td> </tr> <tr> <td>Oct </td> <td>20 </td> <td>22 </td> <td>20 </td> <td>22 </td> <td>20 </td> <td>19 </td> <td>20 </td> <td>22 </td> <td> </td> </tr> <tr> <td>Nov </td> <td>18 </td> <td>17 </td> <td>16 </td> <td>17 </td> <td>16 </td> <td>15 </td> <td>14 </td> <td>15 </td> <td> </td> </tr> <tr> <td>Dec </td> <td>15 </td> <td>13 </td> <td>13 </td> <td>14 </td> <td>13 </td> <td>10 </td> <td>13 </td> <td>11 </td> <td> </td> </tr> </tbody> </table> 

Answer 5

you can try selecting each row through CSS. In your case:

table tr:first-child{background:red}    or   table tr:nth-child(1){background:red}

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

table tr:nth-child(3){background:orange}

table tr:nth-child(4){background:yellow}

table tr:last-child{background:purple} or table tr:nth-child(5)
{background:purple}

Answer 6

The below small piece of code should change the color table row.

 table, td, th {
    border: 1px solid red;
}

th {
    background-color: red;
    color: black;
}

Source: http://www.snoopcode.com/css/css-tables