Change Color Of Rows In A Table In HTML And CSS
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:
Solution 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>Solution 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>Solution 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>Solution 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>Solution 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}
Post a Comment for "Change Color Of Rows In A Table In HTML And CSS"