The same as FORM(@see The Ultimate Collection of AJAX Form Validation Plugins (Controls) ), TABLE is a very important element in web development and tables in html do have great significance in their primary role.
Because styling a table with CSS separates the structural markup from presentation formatting, it offers extra flexibility on the way you present your table. You can edit/change each side of a table cell separately, isn’t it cool. The following is 22+ fresh very useful ajax css tables. Enjoy!
 |
This tutorial introduces some tricks on how you can nicely style a table, and about the proper usage of tables, for tabular data and how you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.
 |
In this article, I show several techniques—both with Ajax and without—that demonstrate this context change-free approach to user experience design. I start with the simplest example of Ajax user experience, the tabbed window.
 |
3) Create a table like Orbitz’s airline flights
A beautiful usage of tables, for tabular data while implementing them with accessibility in mind and how to make them appealing for the eye using CSS.
 |
This is a showcase of 93 styled tables.
 |
5) Collapsible tables with DOM and CSS
This script add the arrow images in the footer allowing the table to be collapsed and expanded. Each of the tables below has a class called "footcollapse" which makes the script add the arrow images in the footer allowing the table to be collapsed and expanded.
 |
6) Drag & Drop Sortable Lists with JavaScript and CSS
Saving the reorderd list is possible by inspecting the DOM. All the sortable lists on this page retain their order via cookies (try rearranging a list and then reloading the page),
 |
GridView 3 is a extjs based ajax css table.
 |
Demo table consists of 86 rows, 774 total cells. Rather than auto-build the table on page load, the button allows you to control the process so you can get a better sense of the speed.
 |
9) Make all your tables sortable
Sorttable is under the X11 licence, which basically means you can do what you want with it, including using it at work. While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data. For instance, imagine a table of employees…
 |
19) MOOTOOLS javascript Table Row & Column highlighting
This shows an mootools javascript example that highlights the table row and column of the cell you are hovering over.
 |
11) Mootable
 |
12) Paginate, sort and search a table with Ajax and Rails
This tutorial will try to use Ajax with Rails in order to display a table of items with several functionalities :
- pagination (split the table on several pages)
- sorting (table ordering by one of its column)
- searching (selecting items to be displayed with a query)
 |
The aim is to replicate a graphic table tree using HTML. This was based on a request from a Web Standards Group member. Posted here in case it is of use to someone else.
 |
14) Row Locking with CSS and JavaScript
Again The Css Guy refered to this technique as ‘row locking’, since the effect stays in place until the user re-clicks (or unlocks) the row.
 |
15) Sortable Table
This table can sort on numbers, strings, dates and currency and filtering on columns. Support Firefox 2 (mac / pc) , IE 7 , IE 6 , Safari (mac) .
 |
16) Stripe your tables the OO way
The ‘stripe’ method runs through each row in the specified table and applies the ‘alt’ class, then adds
onmouseover and onmouseout functions; these use local variables to keep track of the class name and background colour as they are swapped.
 |
17) Standardista Table Sorting
Standardista Table Sorting is a JavaScript module that lets you sort an HTML data table by any column. The module has some advantages like fast and unobtrusive etc.
 |
18) Sortable/Resizable/Editable TableKit
TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.
 |
19) TableSorter plug-in for jQuery
The main new features include:
* Multi-column sorting
* In-line support for setting options done via the class attribute on the TH elements.
* The plugin has been re-written from scratch.
* Support for rowspan and colspan on TH elements.
* New widget support, more information in the docs.
 |
20) Tablecloth
Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. Tablecloth takes bare, well formed table and applies styling and behaviour to it. It searches your html source for table elements and process each one. And there’s absolutely no need for hardcoded class names or id’s. Tablecloth adds those automatically. However, if you wish, you can apply your own class names without fear of them being run over.
 |
Vertical scrolling tables is a css only styled table with fixed column headings and footer and scrolling content. If you have a lot of table data but not much room to display it, then this might be the answer.
 |
22) Zebra Tables
Alistapart has provided us an excellent example of using JavaScript and the DOM to apply background-color styles to table cells.
 |
