PHP/HTML Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML Table</title>
<script src="raxan/startup.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* HTMLTable with hover effect
*/
Raxan.css('master');
Raxan.css('default/theme');
Raxan.include('jquery');
// listen to html ready event
Raxan.ready(function(){
$('table tr').hover(function(){
if (!$(this).hasClass('tbl-header')) $(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
});
});
</script>
</head>
<body>
<div class="container c30 tpm">
<table class="rax-table c22 border mouse-cursor white " cellpadding="0" cellspacing="0">
<thead>
<tr class="tbl-header">
<td>Name</td>
<td>Sku</td>
<td class="sort">Category</td>
<td>Qty</td>
<td>Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>0001</td>
<td class="sort">Dairy</td>
<td>7</td>
<td>White</td>
</tr>
<tr class="even ">
<td>Bread</td>
<td>0012</td>
<td class="sort">Wheat</td>
<td>3</td>
<td>Brown</td>
</tr>
<tr>
<td>Butter</td>
<td>0054</td>
<td class="sort">Dairy</td>
<td>2</td>
<td>Yellow</td>
</tr>
<tr class="even">
<td>Cheese</td>
<td>0021</td>
<td class="sort">Dairy</td>
<td>6</td>
<td>White</td>
</tr>
<tr class="rax-selected-pal rax-metalic">
<td>Jam</td>
<td>0041</td>
<td>Other</td>
<td>4</td>
<td>Blue</td>
</tr>
<tr>
<td>Tea</td>
<td>0164</td>
<td class="sort">Other</td>
<td>2</td>
<td>Green</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>