JQuery Tablify

Overview

Tablify is a JQuery plugin built to extremely simplify beatifying of standard HTML tables.

Demo

View Demo Now

Features

Easy Integration. Takes no exaustive coding of your part. A single line of JavaScript is more than enough. Or even easier - copy an example from this website and paste.

Multiple Browser Support. Tablify has been tested and is working fine in Mozilla Firefox, Internet Explorer 6.0, Opera, Safari and Netscape Navigator.

Small Size. With the size of 8kb Tablify is a must have for every JQuery developer.

Highly Configurable. Either starting writing new style from scratch, or using an existing style every feature of Tablify can be easily configured.

Getting started

To use the Tablify plugin, include the jQuery library and the Tablify plugin inside the tag of your HTML document. If you want to use the extension include it also in the head tag of your HTML document.

    <script src="jquery.min.js" type="text/javascript">
    <script src="jquery.tablify.js" type="text/javascript">
    <script src="jquery.tablify.ext.js" type="text/javascript">

Tablify works on standard HTML tables.

<table id="result" width="300" cellspacing="0">
    <tr><th width="200">Employee</th><th>Sallary</th><th>Bonus</th></tr>
    <tr><td>Claris F. Sanches</td><td>$1500</td><td>$50</td></tr>
    <tr><td>Marry A. Popins</td><td>$2500</td><td>$150</td></tr>
    <tr><td>Mona A. Liza</td><td>$1800</td><td>$20</td></tr>
    <tr><td>Sienna D. Ferguson</td><td>$1300</td><td>$150</td></tr>
</table>

Start by telling Tablify to fancy your table when the document is loaded:

$(document).ready(function() 
    { 
        $("#result").tablify(0); 
    } 
);

Result:

Configuration

Tablify allows full customization. Select a style, that matches your desired table look and feel. Provide the additional options to customize it.

$(document).ready(function(){
    $("#result1").tablify(0,
         {
            tableBorderCollapse:"collapse",
            tableBorder:"1px solid gray",
            tableBorderBottom:"4px solid gray",
            headerPadding:"10px",
            rowsBorderTop:"1px solid gray",
            rowsBorderLeft:"1px dashed gray",
            rowsPadding:"10px",
            hover:"yellow",
            zebra:true,
            zebraBackground:"cornsilk"
         }
    ); 
});

Result:

Available Styles

Tablify comes with 3 built-in styles - 0 (default), 1 and 2. See the demo for preview.

Tablify Extension

Tablify comes with an extension which includes 5 more styles - "box", "clear", "greenlife", "minimalist", "newspaper", "seaglass". See the demo for preview.

Working with Extension

Start by telling Tablify to fancy your table with the desired style when the document is loaded:

$(document).ready(function() 
    { 
        $("#result2").tablify("newspaper"); 
    } 
);

Result:

Configuration Options

License

Tablify version 1.0 (30.03.2009)
Copyright(c)2009 Remiya Solutions All Rights Reserved
Website: http://remiya.com

This script may be used for both free and commercial purposes only
if the following conditions are met: 

 1. A link back to the author's website is provided on the website,
    where the script is being used.
	
 2. You are hereby licensed to make as many copies of this script
    as you need in order to distribute your own work (including
    for commercial use). You are specifically prohibited from
    charging, or requesting donations, for any such copies without
    prior written permission.
	
 3. You ARE NOT allowed to distribute for download the script
    via electronic means (Internet, e-mail, etc). This means
    that this software is to be available to download from the
    official website (http://remiya.com) ONLY.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

Download