Alternate table row color using CSS

There are two syntax of change Alternate table row color using CSS...

I am using a table with alternate row color with this.

CSS:

tr.d0 td {
    background-color: #CC9999; color: black;
}
tr.d1 td {
    background-color: #9999CC; color: black;
}

HTML:

<table>
<tr class="d0"><td>One</td><td>one</td></tr>
<tr class="d1"><td>Two</td><td>two</td></tr>
</table>

Syntax 2

<!-- source: http://www.apphp.com/index.php?snippet=css-alternating-table-color-rows -->

02.<style type="text/css">

03./* technique 1 */

04.tbody tr:nth-child(odd){ background-color:#ccc; }

05./* technique 2 */

06.TBODY TR.odd { background-color:#78a5d1; }

07.</style>

08. 

09.<table>

10.<tbody>

11.<tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

12.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

13.<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

14.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

15.<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

16.</tbody>

17.</table>

18. 

19.<table>

20.<tbody>

21.<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

22.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

23.<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

24.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

25.<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

26.</tbody>

27.</table>





Created By: Hidayt Rahman