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.

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>

you can use :nth-child(even) and :nth-child(odd)

Ishimdar Ahamad
– Ishimdar Ahamad

2015-09-28 08:54:05 +00:00
Commented Sep 28, 2015 at 8:54 — Ishimdar Ahamad
– Ishimdar Ahamad, Commented Sep 28, 2015 at 8:54

Aaron · Accepted Answer · 2015-09-28 09:03:04Z

4

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>

edited Sep 28, 2015 at 9:03

answered Sep 28, 2015 at 8:55

Aaron

10.5k3 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mukul Kant · Accepted Answer · 2015-09-28 09:03:17Z

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>

answered Sep 28, 2015 at 9:03

Mukul Kant

7,1705 gold badges44 silver badges57 bronze badges

Comments

CodeRomeos · Accepted Answer · 2015-09-28 08:55:16Z

1

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>

edited Sep 28, 2015 at 8:55

answered Sep 28, 2015 at 8:53

CodeRomeos

2,4481 gold badge12 silver badges20 bronze badges

1 Comment

Enermis Over a year ago

Additionally you can also add a number for a specific row #table tr:nth-child(3) in case you want to have all rows in different colors

imGaurav · Accepted Answer · 2015-09-28 08:55:29Z

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>

jbutler483 · Accepted Answer · 2015-09-28 09:03:47Z

0

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}

edited Sep 28, 2015 at 9:03

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

answered Sep 28, 2015 at 9:01

mohammad sirajuddin Rayyan

1064 bronze badges

Comments

Prabhakar--PK · Accepted Answer · 2015-10-09 12:19:01Z

0

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

answered Oct 9, 2015 at 12:19

Prabhakar--PK

6,8743 gold badges43 silver badges51 bronze badges

Collectives™ on Stack Overflow

change color of rows in a table in HTML and CSS

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related