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!

donotyet-22  Userful Ajax CSS Tables You Should Know

1) A CSS styled table


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.

Create-table-like-Orbitz-airline-flights

 

2) Ajax for tables


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.

Fresh Ajax CSS Tables Ajax for tables

 

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.

Fresh Ajax CSS Tables Create a table like Orbitz’s airline flights

 

4) CSS Table Gallery


This is a showcase of 93 styled tables.

Fresh Ajax CSS Tables CSS Table Gallery

 

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.

Fresh Ajax CSS Tables Collapsible tables with DOM and CSS

 

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),

Fresh Ajax CSS Tables Drag and Drop Sortable Lists with JavaScript and CSS

 

7) GridView3 Example


GridView 3 is a extjs based ajax css table.

Fresh Ajax CSS Tables GridView3 Example

 

8) jQuery Table Filter


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.

Fresh Ajax CSS Tables jQuery Table Filter

 

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…

Fresh Ajax CSS Tables Make all your tables sortable

 

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.

Fresh Ajax CSS Tables MOOTOOLS javascript Table Row & Column highlighting

 

11) Mootable 


Fresh Ajax CSS Tables 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)
Fresh Ajax CSS Tables Paginate, sort and search a table with Ajax and Rails

 

13) Replicating a Tree table


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.

Fresh Ajax CSS Tables Replicating a Tree table

 

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.

Fresh Ajax CSS Tables Row Locking with CSS and JavaScript

 

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) .

Fresh Ajax CSS Tables Sortable Table

 

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.

Fresh Ajax CSS Tables Stripe your tables the OO way

    

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.

Fresh Ajax CSS Standardista Table Sorting

 

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.

Fresh Ajax CSS Tables Sortable-Resizable-Editable TableKit

 

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.

Fresh Ajax CSS Tables TableSorter plug-in for jQuery

 

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.

Tablecloth

 

21) Vertical scrolling tables


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.

Fresh Ajax CSS Tables Vertical scrolling tables

 

22) Zebra Tables


Alistapart has provided us an excellent example of using JavaScript and the DOM to apply background-color styles to table cells.

Fresh Ajax CSS Tables Zebra Tables

Related Posts