You can easy Alternate Table Row Color by CSS with property nth-child(odd) and nth-child(even)
Here the code:
<!DOCTYPE html> <html> <!-- Don't Break My b***s - Gimme Code! Project --> <!-- Author: Andrea Tonin - http://blog.lucedigitale.com --> <!-- This code come with absolutely no warranty --> <!-- If you use this code in your project please give a link to http://blog.lucedigitale.com --> <!-- Thanks in advance --> <head> <style type="text/css"> /* Table Setup */ #tablesample {width:100%;} #tablesample tr:nth-child(odd) { background:#D4F5DE; } #tablesample tr:nth-child(even) { background:#D2D2F4; } </style> </head> <body> <table id="tablesample"> <tr> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <th>Footer</th> <th>Footer</th> <th>Footer</th> <th>Footer</th> </tr> </table> </body> </html>
Here the result:
Header | Header | Header | Header |
---|---|---|---|
Content | Content | Content | Content |
Content | Content | Content | Content |
Content | Content | Content | Content |
Content | Content | Content | Content |
Content | Content | Content | Content |
Content | Content | Content | Content |
Content | Content | Content | Content |
Footer | Footer | Footer | Footer |
Distanziatore bianco