How to apply different color to different rows in HTML using css [not to alternate rows , but any color to any row]

Question

As shown in the image i want to apply different color to different rows and columns, not only to alternate ones

You might need to add a class to each row and do the styling as necessary. — Pugazh
– Pugazh, Commented Jun 1, 2016 at 6:19
@Rayon yeas, applying color to alternate rows. Will upload the code in few minutres — Khyati
– Khyati, Commented Jun 1, 2016 at 6:20

Pugazh · Accepted Answer · 2016-06-01 06:30:00Z

1

Check below examples.

Add a class to required row and apply styles as required.
Use nth-child selector.

Using class

table {
  border-collapse: collapse;
}
td {
  border: 1px solid grey;
  padding: 10px 20px;
}
tr.yellow {
  background-color: yellow;
}
tr.green {
  background-color: green;
}
tr.blue {
  background-color: blue;
}
tr.red {
  background-color: red;
}

<table>
  <tr class="yellow">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="red">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="green">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="blue">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Using nth-child

table {
  border-collapse: collapse;
}
td {
  border: 1px solid grey;
  padding: 10px 20px;
}
tr:nth-child(1) {
  background-color: red;
}
tr:nth-child(2) {
  background-color: green;
}
tr:nth-child(3) {
  background-color: blue;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

edited Jun 1, 2016 at 6:30

answered Jun 1, 2016 at 6:25

Pugazh

9,5715 gold badges36 silver badges56 bronze badges

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

1 Comment

Khyati Over a year ago

will try it on rows and columns

Akash · Accepted Answer · 2016-06-01 06:22:07Z

0

You can define class for every row with different color or you can user :nth-child(n) pseudo class for every row

answered Jun 1, 2016 at 6:22

Akash

3777 silver badges17 bronze badges

2 Comments

Khyati Over a year ago

instead of "nth" , is their any way to write "1st child" "2nd child" "3rd child" and so

Akash Over a year ago

@Yashika: your can write tr:nth-child(1), tr:nth-child(2), tr:nth-child(3)

iyerrama29 · Accepted Answer · 2016-06-01 07:05:52Z

You could do something like this, create a random function which assigns random color to each row of the table.

Checkout a sample of that

function init(){
  var elements = document.getElementsByClassName('trentries');
    for(var i=0; i<elements.length; i++){  
      getRandomColor(elements[i]);
    }
  }

function getRandomColor(element) {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
  element.style.background = color;
}

<body onload="init()">
  <table class='table'>
    <tr class='head'>
      <th>Col1</th>
      <th>Col2</th>
    <tr>
    <tr class='trentries'>
      <td class='entries'>a</td>
      <td class='entries'>a</td>
    </tr>
    <tr class='trentries'>
      <td class='entries'>a</td>
      <td class='entries'>a</td>
    </tr>
    <tr class='trentries'>
      <td class='entries'>a</td>
      <td class='entries'>a</td>
    </tr>
    <tr class='trentries'>
      <td class='entries'>a</td>
      <td class='entries'>a</td>
    </tr>
  </table>
<body>

Collectives™ on Stack Overflow

How to apply different color to different rows in HTML using css [not to alternate rows , but any color to any row]

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related