Hot!Ajax

Tablecloth

Sunday, 11 November 2007

Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :) Try to mouseover or click on a table below.

Written by Alen Grakalic, brought to you by Css Globe

Download:http://www.hotajax.org/download/jquery/Tablecloth.zip

DEMO

Usage

To use Tablecloth you will need a well formed table. Your table should look like this:

<table cellspacing="0" cellpadding="0"> 

<tr> 

<th>Title</th>

<th>Title</th>

<th>Title</th>

<th>Title</th>

</tr>

<tr>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr> 

</table>

Add this two lines of code inside your

<head>

tag.

<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

and you are ready to rock.

Modifications

Apearance modification is performed with css file

tablecloth.css

. Tablecloth enables you to style even and odd rows, and over, out, down and selected state for table elements (th and td), Apart from that, you are able to select whether you want to highlight columns, rows or both and if you want elements to be selected on click. It is done by modifying values of 3 variables found in