Development

21+ Fresh Ajax CSS Tables

November 15th, 2007

Not many web designers have fun when it comes to styling tabular data. We have taken a close look at today’s best functioning and styled tables to showcase over 15 modern css and Ajax tables teaching you some useful techniques for displaying information in a tabular mode using sorting or filtering functions.

You might be interested to take a look at the links below:

So let’s take a look around.


1) Tablecloth – Css Globe has decided to present Tablecloth. Which is a lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements.

Tablecloth


2) Create a table like Orbitz’s airline flights- The Css Guy taught us how to create a table that would give an indication of relationships among the information provided for example – clicking on a cell should highlight the associated cell in the top row and left most column.

orbitz


3) A CSS styled table- Veerle Duoh has demonstrated 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.

CSS styled table


4) Sortable Table Sort the columns in a table and filter elements in the table.

row locking


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

row locking

He also added another example to Lock rows with radios .


6) Vertical scrolling tablesIf you have a lot of table data but not much room to display it, then this might be the answer. A css only styled table with fixed column headings and footer and scrolling content./p>

Vertical scrolling tables


7) Replicating a Tree table-The aim is to replicate a graphic table tree using HTML./p>

table tree


8 ) Paginate, sort and search a table with Ajax and Rails-This example provide a dynamic interface which doesn’t need to reload the entire page when the table changes.

ajax tables


9) Collapsible tables with DOM and CSS-This script add the arrow images in the footer allowing the table to be collapsed and expanded.

Collapsible tables


10) TableSorter plug-in for jQuery-Its main features include Multi-column sorting, Support for rowspan and colspan on TH elements and many other features

TableSorter


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

TableSorter


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

mootools


13) CSS Table Gallery-This is a showcase of 93 styled tables.

css gallery


14) jQuery Table FilterThis example sorts/filters multiple columns

jquery table filter


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

sortable, resizable, editable


16) Make all your tables sortable

sortable table


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

sortable table


18 ) Standardista Table Sorting is a JavaScript module that lets you sort an HTML data table by any column.

sortable table


19) GridView3 Example

Grid


20) Mootable Because they are made from standard tables, they degrade nicely.

MOOTOOLS


21) Drag & Drop Sortable Lists with JavaScript and CSS

drag and drop


For those of you looking for even more detailed information, here are links to some further reading:

 

Further Readings:

If you guys have an interesting Ajax/CSS Table that you think it should be added to the list, don’t hesitate to let me know and a link to your site will be added beside your chosen example.

Credits

Thanks to our friend "Rich LaMarche" for recommending Tablekit addition (#15) in this post.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

34 comments for „21+ Fresh Ajax CSS Tables
  1. Rich LaMarche on November 15th, 2007 at 5:41 pm

    Don’t forget the excellent TableKit
    widget written on top of Prototype. It is unobtrusive, allows sorting, striping, column resizing, and in place editing. Recommended if you are using Prototype.
    -Rich

  2. Noupe on November 16th, 2007 at 12:26 am

    Hi Rich,
    I totally missed this one, good choice. It will be added today to this list.
    Credits will be assigned manually at the end of each article until we finish our own credit module.
    Thanks Rich :)

  3. wholic on November 24th, 2007 at 12:35 pm

    I found “standarlista” useful. Thanks.

  4. Sasha Cohen on December 2nd, 2007 at 1:17 pm

    Hi…Man i love reading your blog, interesting posts ! it was a great Sunday . Sasha Cohen

  5. Jordan Meeter on December 2nd, 2007 at 8:26 pm

    Fantastic list, thanks!

  6. asshur on December 4th, 2007 at 11:12 pm

    Cool post. I love your work.

  7. ipa-iba on December 6th, 2007 at 11:28 am

    Great list.

    I really like the html tree table. I’m not sure I’ve seem much similar around.

  8. Sorabh on December 8th, 2007 at 9:57 am

    Cooool……will help me a lot :)

  9. Noupe on December 8th, 2007 at 10:50 am

    wholic , Sasha, Jordan, asshur, Ipa-ida
    Yea, this is a very good collection of Ajax Css tables that realy would make your site stand out when you are using tabular data in.

  10. dated on February 8th, 2008 at 3:25 am

    point 9 leads to wrong url

  11. pquer craps baccarat on February 13th, 2008 at 6:09 pm

    Like the site very much, thanx 4 your efforts webmasters

  12. Dave on March 24th, 2008 at 12:59 pm
  13. leon caddick on July 9th, 2008 at 10:05 am

    excellent – just wish i’d found it sooner!

  14. Ivan on July 29th, 2008 at 8:31 am

    You might want to include this in your list:
    http://dhtmlx.com/docs/products/dhtmlxGrid/ – Customizable Ajax DataGrid with sorting, filtering, searching capabilities. A set of predefined skins is available. Works fast with large datasets.

  15. Clifford on August 30th, 2008 at 12:03 am

    Very nice.. Good selection

  16. nickel22 on September 25th, 2008 at 5:22 am

    a very good list.. i think that i get some of this for apply at my works.

    In veerle’s blog i found this http://veerle.duoh.com/blog/comments/a_css_styled_table/

    bye :)

  17. barraca freelance on September 28th, 2008 at 3:56 am

    Thank’s it seems that ajax is unstopeable! :)

  18. That Namelezz Guy on October 12th, 2008 at 3:48 am

    Great article!

  19. love on October 15th, 2009 at 11:43 am

    just let love be

  20. Binu on November 4th, 2010 at 1:28 pm

    I was looking for a simple, clean and clear table CSS and fortunately landed here. I used ‘A CSS styled table’ without any second thought in my screen. Special thanks to you.

  21. Alonzo Stangroom on November 5th, 2010 at 4:48 pm

    Perfect short article, well written I must say.

  22. Electricians Minneapolis on January 27th, 2011 at 10:55 pm

    You are awesome thank you for the publish buddy.

  23. h2spot.net on January 31st, 2011 at 4:00 pm

    Great article… luv it

  24. francis on March 1st, 2011 at 4:42 pm

    Good examples. Thanks for sharing.

  25. richa shrivastava on May 1st, 2011 at 10:50 pm

    all list are good and well designed ,and help me alot …….thanks.

  26. Kent on July 11th, 2011 at 8:56 am

    Lets say I want a Premier League Table on my website, which will be updated after each match in the league. I guess I can use some of the examples regarding to tables, but how do I implement all the data(bases?) on the website?

    And yes, I am quite stupid :)

  27. RipCooL on August 3rd, 2011 at 4:32 pm

    Is something wrong with the thumbnails! cant see it! i search one by one! nice tables anyways! thanks.

  28. eg on September 7th, 2011 at 4:13 pm

    Here is another one that would be good for the list: http://tablestyler.com

  29. Suyash Sumaroo on September 13th, 2011 at 8:12 am

    Nice Work..it will really help me a lot for designing tables

  30. Wasim Amin on September 14th, 2011 at 3:43 pm

    nice stuff over here..
    That was what i was looking for

  31. Miguel on September 27th, 2011 at 5:40 pm

    Thank you exactly was i looking for!!

  32. Ryan on September 27th, 2011 at 11:01 pm

    Cool list of table designs!

  33. Predcasna ejakulace on February 13th, 2012 at 5:34 pm

    I coudnt download those ables. it is giving me 404 error messeage. whats wrong? please someone tell me thanks

  34. Peter Drinnan on October 2nd, 2012 at 5:01 pm

    2008 seems so long ago but most of these tables still measure up to today’s “standards”. Good enough for me anyway. Thanks.