Sample screenshot of end product

In this tutorial we’re going to use CSS3 to design the table and jQuery to create its cool hover effect. The hover effect helps highlight the rows for the user while adding a touch of color to the table; you could say that it serves both form and function.

CSS3

For the table and the rounded corners:

table {

*border-collapse: collapse;   /* IE7 and lower */

border-spacing: 0;

}

th:first-child {

-moz-border-radius: 6px 0 0   0;

-webkit-border-radius: 6px   0 0 0;

border-radius: 6px 0 0 0;

}

th:last-child {

-moz-border-radius: 0 6px 0   0;

-webkit-border-radius: 0   6px 0 0;

border-radius: 0 6px 0 0;

}

This part is for the hover effect:

.bordered tr:hover

{

background: #fbf8e9;

-o-transition: all 0.1s   ease-in-out;

-webkit-transition: all 0.1s   ease-in-out;

-moz-transition: all 0.1s   ease-in-out;

-ms-transition: all 0.1s   ease-in-out;

transition: all 0.1s   ease-in-out;

}

Since not all of this supports CSS3, you can use this jQuery alternative instead:

$('.bordered tr').mouseover(function(){

$(this).addClass('highlight');

}).mouseout(function(){

$(this).removeClass('highlight');

});

And here is the class, which is basically the .bordered tr:hover duplicate:

.highlight

{

background: #fbf8e9;

-o-transition: all 0.1s   ease-in-out;

-webkit-transition: all 0.1s   ease-in-out;

-moz-transition: all 0.1s   ease-in-out;

-ms-transition: all 0.1s   ease-in-out;

transition: all 0.1s ease-in-out;

}

Here’s the full and complete CSS code:

body {

width: 600px;

margin: 40px auto;

font-family: 'trebuchet   MS', 'Lucida sans', Arial;

font-size: 14px;

color: #444;

}

table {

*border-collapse: collapse;   /* IE7 and lower */

border-spacing: 0;

width: 100%;

}

.bordered {

border: solid #ccc 1px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-webkit-box-shadow: 0 1px 1px   #ccc;

-moz-box-shadow: 0 1px 1px   #ccc;

box-shadow: 0 1px 1px   #ccc;

}

.bordered tr:hover {

background: #fbf8e9;

-o-transition: all 0.1s   ease-in-out;

-webkit-transition: all   0.1s ease-in-out;

-moz-transition: all 0.1s   ease-in-out;

-ms-transition: all 0.1s   ease-in-out;

transition: all 0.1s   ease-in-out;

}

.bordered td, .bordered th {

border-left: 1px solid   #ccc;

border-top: 1px solid #ccc;

padding: 10px;

text-align: left;

}

.bordered th {

background-color: #dce9f9;

background-image:   -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));

background-image:   -webkit-linear-gradient(top, #ebf3fc, #dce9f9);

background-image:    -moz-linear-gradient(top, #ebf3fc,   #dce9f9);

background-image:     -ms-linear-gradient(top, #ebf3fc,   #dce9f9);

background-image:      -o-linear-gradient(top, #ebf3fc,   #dce9f9);

background-image:         linear-gradient(top, #ebf3fc,   #dce9f9);

-webkit-box-shadow: 0 1px 0   rgba(255,255,255,.8) inset;

-moz-box-shadow:0 1px 0   rgba(255,255,255,.8) inset;

box-shadow: 0 1px 0   rgba(255,255,255,.8) inset;

border-top: none;

text-shadow: 0 1px 0   rgba(255,255,255,.5);

}

.bordered td:first-child, .bordered th:first-child {

border-left: none;

}

.bordered th:first-child {

-moz-border-radius: 6px 0 0   0;

-webkit-border-radius: 6px   0 0 0;

border-radius: 6px 0 0 0;

}

.bordered th:last-child {

-moz-border-radius: 0 6px 0   0;

-webkit-border-radius: 0   6px 0 0;

border-radius: 0 6px 0 0;

}

.bordered tr:last-child td:first-child {

-moz-border-radius: 0 0 0   6px;

-webkit-border-radius: 0 0   0 6px;

border-radius: 0 0 0 6px;

}

.bordered tr:last-child td:last-child {

-moz-border-radius: 0 0 6px   0;

-webkit-border-radius: 0 0   6px 0;

border-radius: 0 0 6px 0;

So that covers both the CSS3 and jQuery portion of the tutorial. As for the HTML, all you have to do is use standard table tags in order to call the CSS styling, and you have to remember to do this:

<table>

Here’s a comparison of the table, with and without CSS3 support (notice the corners):

And there you go!

Incoming search terms for the article:

• css3 table
• jquery hover effect
• css3 table design
• css table design
• jquery hover effects
• tr:hover
• table css3
• jquery hover
• jquery cool table
• effect to table for website

Click on the image above to get download options, available in compressed formats: TAR, GZ, and ZIP.

This useful plugin converts a properly formatted table into a scrollable table. It manipulates the table by placing the contents within a DIV, while creating a couple of other elements.

So far it has been successfully tested in Chrome, FireFox 3.6, Safari 4, and also IE6 and 8 running on Windows platform. For more updated info about browser compatibility, you may check out the comments on the plugin’s main page here, or the developer’s page over at GitHub.

Incoming search terms for the article:

• jquery tablescroll
• jquery table scroll
• jquery scrollable table
• jquery scroll table
• jquery tablescroll plugin
• jquery tablescroll js
• scrollable tables
• table web design
• tablescroll
• jquery Scrollable Tables

Originally, EditableGrid was a component developed to be used in Timetrack, an online time tracking and invoicing tool. Thereafter, this work has been factorized into an external library.

Features

• Load grid from XML or attach to an existing HTML table
• Simple to use and easy integration into existing web applications
• Each column is typed (string, integer, double, boolean, url, email, date)
• Edit cells with a suitable editor, according to the column type (eg. checkbox for boolean)
• Possibility to declare a list of possible values for the cells of a column (statically or in Javascript)
• Management of unit, precision and NaN values for numeric columns
• Built-in validators for columns of type integer, double, url, email and date
• Possibility to plug your own cell renderers, editors and validators
• Sort columns accordingly to their types, by clicking on the column header
• PHP binding: build your grid in PHP and let it generate the XML file
• Filtering of the grid
• Insert and remove rows
• Open Flash Chart integration to render charts from the grid data (the chart can follow when editing data or sorting columns)
• Callbacks for all events: load, edition, sorting, etc.

Requirements:
Demo: http://www.webismymind.be/editablegrid
License: GPL license

Incoming search terms for the article:

• jquery editable table
• cakephp editable grid
• grilla editable cakephp
• cakephp editable table
• editable html table
• editable table html
• editablegrid
• cakephp flexigrid
• flexigrid cakephp
• jquery editable xml table

TableKit allow us to sort the column, by click the table header cells, resize the column by dragging the right border of a header cell, click a cell in the table body to edit the value.

Requirements: Prototype framework
Demo: http://millstream.com.au/upload/code/tablekit/index.html
License: MIT

Incoming search terms for the article:

• html5 sortable table
• html5 editable table
• editable html table
• tablekit jquery
• html5 sortable
• html5 table sortable
• jquery tablekit
• html5 table editable
• tablekit
• sortable table html5

Simply add the script to the end of the body and it’ll converts all the table with a class called ‘toChart’. You can define the size and the colour within the attribute class of the table.

Requirements: Mootools framework
Demo:http://thinkphp.ro/apps/google/Google%20Chart%20API/mootools/MooTools%201.2.4/
License: License free

Incoming search terms for the article:

• mootools charts
• mootools datatables
• mootools datatable
• datatables mootools
• datatable mootools
• datatables de mootools
• mootools write data table
• simple tables to create charts
• mootools data table
• table2chart jquery

The TableGear package has two parts. TableGear.php is concerned with fetching data, formatting it, and getting it into an XHTML table. It also handles submitted data, both from AJAX calls and a standard POST, and returns data to the application. TableGear.js handles the client-side functions that make the tables dynamic including sorting, editing and keyboard shortcuts. These scripts can be used independently, but are designed to be used together.

Requirements: Mootools framework
Demo: http://andrewplummer.com/demos/tablegear/
License: License free

Incoming search terms for the article:

• mootools datatable
• TableGear
• tablegear wordpress
• get data from excel ajax html
• tablegear mootools
• tablegear mootools demo
• tablegear php
• tablegear problems
• tablegear tutorials
• tablegear using htm 5

Since <td>s are very fixed elements and aren’t animatable, the animation is done by some DOM-scripted <div>s, which animate to their new homes then repopulate their new <td> homes.

Requirements: jQuery framework
Demo: http://mitya.co.uk/scripts/Table-sort…
License: License free

Incoming search terms for the article:

• jquery table sort
• jquery tablesort
• jquery animated sort
• animated table sort
• jquery sort animation
• table sort jquery
• jquery animated table sort
• tablesort jquery
• jquery table animation
• jquery sort

Features

• Resizable columns
• Resizable height and width
• Sortable column headers
• Cool theme
• Can convert an ordinary table
• Ability to connect to an ajax data source (XML and JSON[new])
• Paging
• Show/hide columns
• Toolbar (new)
• Search (new)
• Accessible API
• Many more

Requirements: jQuery framework
Demo: http://www.flexigrid.info/
License: Other license

Incoming search terms for the article:

• jquery datagrid
• cakephp datagrid
• Flexigrid cakephp
• jquery data grid
• flexigrid themes
• cakephp jquery grid
• cakephp flexigrid
• jquery flexigrid
• datagrid jquery
• flexigrid

Features

• Variable length pagination
• On-the-fly filtering
• Multi-column sorting with data type detection
• Smart handling of column widths
• Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
• Fully internationalisable
• jQuery UI ThemeRoller support
• Rock solid – backed by a suite of 1300+ unit tests
• Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
• And more..

Demo: http://www.datatables.net/
License: GPL v2 license or a BSD (3-point) license

Incoming search terms for the article:

• jquery datatable
• datatable jquery
• jquery advanced table
• data table
• jquery datatables
• data table jquery
• advanced table jquery
• jquery datatable pdf
• jquery datatables review
• advanced tables jquery

Features

• Virtual scrolling/rendering (hundreds of thousands of rows)
• Extremely fast rendering speed
• Background post-rendering for richer cells.
• Configurable & customizable
• Full keyboard navigation
• Column resize/reorder/show/hide
• Column autosizing & force-fit
• Custom cell formatters & editors
• Support for editing and creating new rows.
• “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

In fact, there is no difference in performance between working with a grid with 10 rows versus a 100’000 rows. This is achieved through virtual rendering where only what’s visible on the screen plus a small buffer is rendered.

Demo:

• Basic use: http://slickgrid.googlecode.com/svn/trunk/examples/example1-simple.html
• Adding some formatting: http://slickgrid.googlecode.com/svn/trunk/examples/example2-formatters.html
• Turning it into a spreadsheet: http://slickgrid.googlecode.com/svn/trunk/examples/example3-editing.html
• Using a simple Model (filtered data view) to drive the grid: http://slickgrid.googlecode.com/svn/trunk/examples/example4-model.html
• Adding tree functionality (expand/collapse) to the grid: http://slickgrid.googlecode.com/svn/trunk/examples/example5-collapsing.html
• AJAX-loading data (shows all Apple-related Digg stories): http://slickgrid.googlecode.com/svn/trunk/examples/example6-ajax-loading.html
• Using pre-compiled micro-templates to render cells: http://slickgrid.googlecode.com/svn/trunk/examples/example8-alternative-display.html
• Using background post-rendering to add graphs: http://slickgrid.googlecode.com/svn/trunk/examples/example10-async-post-render.html

License:MIT License
Project Home: http://code.google.com/p/slickgrid/

Incoming search terms for the article:

• slickgrid
• slickgrid demo
• javascript spreadsheet
• spreadsheet javascript
• jquery slickgrid demo
• slick grid
• javascript grid
• SlickGrid ajax
• SlickGrid demos
• slick grid demo