When you have a table on a website with a lot of rows it looks nice to add a background color to every other row. Just a subtle color change in every other row can help the human eye keep it’s place as it looks both across the row and down the page across the rows vertically. This technique is called “zebra striping”.
Sure you can add a CSS class to every other row manually, but what happens if you need to re-arrange or delete some rows? Having to go back and manually make sure every other row has a class so the zebra striping is on every other row is no longer a suitable solution. Luckily with the power of CSS3 this is no longer necessary. Check out the demo, and then grab the CSS code for your project.
View Demo
All you need to do to add a background color to every other row in your table is add the following to your CSS file. This won’t work in Internet Explorer (big surprise), so if you really need to support every browser including IE, then check out how to use jQuery to apply zebra striping to a table.
tbody tr:nth-child(odd) {
background-color:#a9cdeb
}
Pingback: How To Use CSS3 Pseudo-Classes | i know idea
Pingback: ???? CSS3 ?? | zend???-java/php?????web?????????????????SEO??