Colouring of Table Rows Alternatively

Alternate table row color using CSS?

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

Alternate row colours from 2nd row of the table using CSS

You can used nth-child() css selector to chose odd and even. Then skip 2nd row by nth-child(2) selector.

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: green}
tr:nth-child(1) {
background:none;}

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

Alternate row color in HTML table with rowspan

A table can have multiple tbody elements. You can use tbody with nth-child to have different colors for your groups of rows:

table {  width: 100%;  border-collapse: collapse;}
thead {  background: #e3e3e3;}
tbody * {  font-weight: normal;}
tbody:nth-child(odd) {  background: red;}
tbody:nth-child(even) {  background: blue;}
tr,th {  padding: 10px 0;}
th {  width: 33.33333%;}

<table>  <thead>    <tr>      <th>Column 1</th>      <th>Column 2</th>      <th>Column 3</th>    </tr>  </thead>  <tbody>    <tr>      <th rowspan="3" class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th class="add-color" rowspan="2">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th rowspan="4" class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>  </tbody></table>

Alternate table row color using CSS, individual cells get colored not the even rows

@svdh You've got tags outside of your body and html tags also which in a normal web page wouldn't be rendered. The problem with your HTML is you're setting up loads of tables instead of one with multiple rows. It should be like this.

<table>
 <tr>
  <td>One</td>
  <td>One.</td>
 </tr>
 <tr>
  <td>Two</td>
  <td>Two.</td>
 </tr>
 <tr>
  <td>Three</td>
  <td>Three.</td>
 </tr>
</table>

Fiddle here..
https://jsfiddle.net/fo7Ldfqs/

UPDATED:

If you've got multiple tables and you're trying to color every other one then just use:

table:nth-child(odd){background:#ff0000;}

Fiddle here.. https://jsfiddle.net/4641ph6u/

Alternate table row colors for direct child

Try this:

table#news > tr:nth-child(even) {      
  background-color: red;
}
table#news > tr:nth-child(odd) {
  background-color: green;
}

> Means that it's a #news has to be a direct parent of the tr.

In order for this to work, you also have to add the tbody selector.

table#news tbody > tr:nth-child(even) {      
  background-color: red;
}
table#news tbody > tr:nth-child(odd) {
  background-color: green;
}

tbody element is automatically added by the browser.

Anyway, the above still won't work because you can not nest a tr inside a td. What you have to do is create an entire new table inside the td. See this: Html table tr inside td

Run the code snippet below and look at the source code.

table.news > tbody > tr:nth-child(even) {  background-color: red;}table.news > tbody > tr:nth-child(odd) {  background-color: green;}

<table class="news">  <tr>    <td>Row 1</td>  </tr>  <tr>    <td>Row 2</td>  </tr>  <tr>    <td>Row 3</td>  </tr></table>
<table class="news">  <tr>    <td>      Test      <tr>        <td>Row 1</td>      </tr>      <tr>        <td>Row 2</td>      </tr>      <tr>        <td>Row 3</td>      </tr>    </td>  </tr></table>
<h1> Fixed </h1>
<table class="news">  <tr>    <td>Row 1</td>  </tr>  <tr>    <td>Row 2</td>  </tr>  <tr>    <td>Row 3</td>  </tr></table>
<table class="news">  <tr>    <td>      Test      <table>        <tr>          <td>Row 1</td>        </tr>        <tr>          <td>Row 2</td>        </tr>        <tr>          <td>Row 3</td>        </tr>      </table>    </td>  </tr></table>

How to color table rows with 3 alternate color

Following to the w3c, you try this:

  tr:nth-child(3n+1) {
    background-color: black;
  }
  tr:nth-child(3n+2) {
    background-color: red;
  }
  tr:nth-child(3n) {
    background-color: white;
  }