<script type=”text/javascript”>

$(document).ready(function(){

//jQuery ready is quicker than onload

$(“.stripeMe tr”).mouseover(function(){$(this).addClass(“over”);}).mouseout(function(){$(this).removeClass(“over”);});

$(“.stripeMe tr:even”).addClass(“alt”);

});

</script>

<style type=”text/css”>

table.sample {

border-collapse: collapse;

width: 50%;

margin: 24px;

font-size: 1.1em;

}

table.sample th {

background: #3e83c9;

color: #fff;

font-weight: bold;

padding: 2px 11px;

text-align: left;

border-right: 1px solid #fff;

line-height: 1.2;

}

table.sample td {

padding: 6px 11px;

border-bottom: 1px solid #95bce2;

vertical-align: top;

}

table.sample td * {

padding: 6px 11px;

}

table.sample tr.alt td {

background: #ecf6fc;

}

table.sample tr.over td {

background: #bcd4ec;

}

</style>

<table class=”stripeMe sample”>

<thead>

<tr>

<th>Lorem</th>

<th>Ipsum</th>

<th>Dolor</th>

<th>Sit</th>

<th>Amet</th>

</tr>

</thead>

<tbody>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

<tr>

<td>Lorem</td>

<td>Ipsum</td>

<td>Dolor</td>

<td>Sit</td>

<td>Amet</td>

</tr>

</tbody>

</table>