jQuery

Alternate Styles

Alternate Styles for Table Rows
     jsFiddle

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
.ms-demo-container {margin-bottom: 1em; font-family:Arial, Helvetica, sans-serif;}
.ms-demo-container th, .ms-demo-container td {color:#f0f0f0; font-size:.80em; padding:2px 8px; text-align:left;}
.ms-demo-container th {background:#3d4c53;}
.ms-demo-even {background:#e6772e;}
.ms-demo-odd {background:#f2af32;}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.ms-demo-container tr:even').addClass('ms-demo-even');
$('.ms-demo-container tr:odd').addClass('ms-demo-odd');});
</script>
</style>
</head>
<body>
<div class="ms-demo-container">
<table width="100%" border="0" cellspacing="1" cellpadding="4">
<tr>
<th>Country</th>
<th>Points</th>
</tr>
<tr>
<td>Germany</td>
<td>10</td>
</tr>
<tr>
<td>Italy</td>
<td>20</td>
</tr>
<tr>
<td>France</td>
<td>11</td>
</tr>
<tr>
<td>Sweden</td>
<td>7</td>
</tr>
</table>
</div>
</body>
</html>