table hover

by aka_SKIff

HTML

<script src="http://p.sohei.org/stuff/jquery/tablehover/demo/jquery.tablehover.js"></script>
<table id="tableone">
		<thead>
			<tr><th colspan="2">A</th><th colspan="2">B</th><th colspan="2">C</th><th colspan="2">D</th></tr>
			<tr><th>A+</th><th>A-</th><th>B+</th><th>B-</th><th>C+</th><th>C-</th><th>D+</th><th>D-</th></tr>
		</thead>
		<tfoot>
			<tr><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr>
		</tfoot>
		<tbody>
			<tr><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class=""><a href="#">X</a></td><td class="">-</td><td class="">-</td><td class="">-</td><td class="">-</td></tr>
			<tr><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class=""><a href="#">X</a></td><td class="">-</td><td class="">-</td><td class="">-</td><td class="">-</td></tr>
			<tr><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class="">-</td><td class="">-</td><td class="">-</td><td class="">-</td><td class="">-</td></tr>
			<tr><td class="">-</td><td class="">-</td><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td></tr>
			<tr><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class=""><a href="#">X</a></td><td class="">-</td><td class="">-</td><td class="">-</td><td class=""><a href="#">X</a></td></tr>
			<tr><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class=""><a href="#">X</a></td><td class="">-</td><td class="">-</td><td class="">-</td><td class=""><a href="#">X</a></td></tr>
			<tr><td class=""><a href="#">X</a></td><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a href="#">X</a></td><td class="">-</td><td class=""><a...

CSS

table
{
	width: 400px;
    margin: 10px 50px;
	border: 1px solid gray;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: center;
}
thead
{
	background: bisque;
}
tfoot
{
	background: khaki;
	text-align: center;
}
td, th
{
	border: 1px solid gray;
}
td.click, th.click
{
	background-color: #bbb;
}
td.hover, tr.hover
{
	background-color: #69f;
}
th.hover, tfoot td.hover
{
	background-color: ivory;
}
td.hovercell, th.hovercell
{
	background-color: #abc;
}
td.hoverrow, th.hoverrow
{
	background-color: #6df;
}

JavaScript

$('#tableone').tableHover({colClass:'hover', rowClass:'', spanRows:false, headCols:false});