Learn how easily you can give an altering color to your html table row using CSS3 only.

Back to couple years ago before CSS3 is introduced, we have to manually specify the altering color to row background. This can be done in two ways. The first option is to add the style directly to the tr tag. While the second option is to add a css class into the row tag and define what will be the style for that css class.

Since the CSS3 has been introduced, you can now easily using the CSS3 style property even and odd rules. Let see the following example of html code we have.

<style>
	table.tblAltering td{
		padding:5px 10px;
	}
	
	table.tblAltering tr:nth-child(1n+even) {
		background: #eff4fd;
	}
	
	table.tblAltering tr:nth-child(1n+odd) {
		background: #ffffff;
	}
</style>

<table class='tblAltering' cellpadding='0' cellspacing='0'>
	<tr>
		<td>James</td>
		<td>Plumber</td>
		<td>35</td>
	</tr>
	<tr>
		<td>Adrian</td>
		<td>Teacher</td>
		<td>22</td>
	</tr>
	<tr>
		<td>Ben</td>
		<td>Truck Driver</td>
		<td>Age</td>
	</tr>
	<tr>
		<td>Kelly</td>
		<td>Cashier</td>
		<td>28</td>
	</tr>
</table>

So basically the rule is the odd keyword represents the odd rows which is 1,3,5,7 and so on, while the even number represent 2,4,6, 8 and so on.

Is it possible to start from specific row?

This can be easily achieve by specifying the row number using the number with n keyword. For example if you want the row to start from row number 10. Then use the following css.