Some of you might have bumped into these tables long time ago but for those who haven’t yet, here’s the list for you. Most people may have turned their backs to tables for implementing web page layouts because tables compared to table-less-layout-based on CSS positioning has several advantages. But tables are not totally useless! By adding a bit of jQuery you will be able to create very useful solutions with HTML tables that your users will find it easy and intuitive to use… probably still only use them for data though! :P

This is in addition to some previous posts:

1. PicNet JQuery Table Filter

This plugin adds a row to the section of a table and adds filters that allows real time filtering of tabular data.

2. TinySort

A plugin to sort child nodes by (sub) contents or attributes. It is very useful for ordering unordered lists or tables, but works on any type of node.

3. Graph data from an HTML table using jQuery and flot

Draw graphs from html tables. graphTable() takes up to two objects as arguments: the first is an object with the arguments for graphTable; the second is an object with arguments to be handed off to flot.

4. jLINQ

If you’ve used the .NET Framework, chances are you’ve also used LINQ. The features found in LINQ allow you to work with collections in-memory to query, sort and manage data, much like you would with a SQL command. LINQ also allows you to connect directly to a database to manage records all within your IDE.

5. Floating header plugin

A jQuery plugin that makes the header of a table floating if the original header isn’t visible due to scrolling. The plugin will automatically choose the head tag as the header for a table.

6. columnHover

Lets you highlight whole columns in a table when hovering over them.

7. Scrollable HTML Table

A plugin for jQuery able to convert a table into scrollable.

8. HeatColor

We have posted heatcolor before but it’s so good. A plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

9. Fixed Header Tables

Takes valid table HTML and builds a fixed header and scrolling body with optional footer.

10. NReco jSquared

A jQuery plugin that enables ability to add/remove HTML table columns and rows ‘on-the-fly’. Its functionality is very similar to Google Squared UI and useful for building advanced search interfaces.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.