Most people have turned their back to tables for implementing web page layouts.
This is because tables compared to table-less layout beased on CSS Positioning has several disadvantages. But tables are not useless at all! They should just be used to render tabular data as they originally was designed for.
By adding a bit of jQuery you will be able to create very useful solutions with html tables that your users will find easy and intuitive to use. Want more post like this one?
- 60+ Must Have jQuery Toolbox
- Toolkit with 6 Awesome jQuery User Interface components
[exec]$filestr = file_get_contents(‘https://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
Tables can be useful in many ways but some types of content really stand out when presented using jQuery Slider or jQuery Carousel plugins. Choosing the right tools for the task at hand is important.
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. Please see the home page for full details.
A plugin to sort child nodes by (sub) contents or attributes. Very useful for ordering unordered lists or tables, but works on any type of node. Download it to get documentation and examples.It doesn’t get easier to sort fx. listsbut it is also possible to apply more complex sorting logic:
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
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.
jLINQ works like .NET LINQ and lets you use commands to query collections that are in memory. jLINQ copies many of the same commands you find in LINQ like skip or take along with certain aggregate functions like sum.
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 thead tag as the header for a table. If thead isn’t found it will search for rows marked with the class ‘floating’. The behavior can be changed by setting the option forceClass to true.
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.
columnHover lets you highlight whole columns in a table when hovering over them.
Scrollable HTML Table
Scrollable HTML Table plugin for jQuery able to convert a table into scrollable.
DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some key features include: variable length pagination, on-the-fly filtering, and multi-column sorting with data type detection.
HeatColor is 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.
Fixed Header Tables
Fixed Header Tables takes valid table HTML and builds a fixed header and scrolling body with optional footer.
Colorize – jQuery Table Plugin
Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.
Flexigrid gives you a lightweight but rich data grid with resizable columns and scrolling data to match the headers. It also has the ability to connect to an xml based data source using Ajax to load the content.
This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.
Striping Your Tables the OO Way
This demonstartion is an adaptation of a well written snippet of code by Mathew Pennell – “Striping Your Tables the OO Way”
Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
Simple little plugin to allow selecting of rows (single or multi) in a table.
treeTable allows you to turn a column in your table into a tree. One notable feature is the ability to move an entire branch in the tree by dragging and dropping.
Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.
jSquared is 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.
This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.
columnManager allows you to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.
Table Drag and Drop
Table Drag and Drop allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.
Chromatable allows you to easily create scrolling tables with fixed headers.
uiTableFilter is a plugin that makes filtering table rows very easy.
We have a lot of good articles for you. If you want to make your life a little bit easier and create automated content you should have a look at WP Robot for WordPress. We like to showcase and inspire you with nice things like this beautiful Epiphone Les Paul vintage Sunburst. Please have a look.
Also don’t miss these best wordpress themes if you’re looking for a great theme for your website.
Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.
Highly Useful jQuery Plugins Bringing Life back to HTML Tables
Stay away from jExpand!!!
It’s a scam !!
[…] to the site done about the same time was to add filters to the product-listings tables via jquery tools I had read about. For some product lines with over 30 models, this was a god-send. Thanks to Mike […]
[…] 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables Most people have turned their back to tables for implementing… […]
[…] In questo post “Data Tables In Modern Web Design” si parla di tabelle e del loro utilizzo nella progettazione delle pagine web per presentare grandi quantità di informazioni in maniera strutturata e facilmente leggibile dal lettore. Nell’articolo vengono riportati diversi esempi di come è possibile utilizzare al meglio le tabelle, ad esempio nella comparazione di prodotti e servizi, degli elementi da utilizzare per migliorarne l’usabilità, i colori, la possibilità di interagire con righe e colonne etc… Dopo la lettura dell’articolo, se volete provare anche voi a realizzare qualcosa del genere, magari possono tornare utili questi plugin jQuery. […]
Good collcetion of table plugins and codes
[…] se volete provare anche voi a realizzare qualcosa del genere, magari possono tornare utili questi plugin jQuery. Salva / […]
[…] 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables […]
thx collect some to
[…] See the original post here: 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables | tripwire magazine […]
[…] 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables | tripwire magazine […]
[…] Plugins jQuery para manejo de tablas HTML Autor jlopezto Diciembre – 25 – 2009 Aunque en la actualidad el uso de tablas para maquetación web está cada vez mas en desuso en favor de otros elementos HTML como las capa, para algunas aplicaciones web sigue siendo vital la presentación de datos tabulados. Por este motivo incluimos el artículo publicado en Tripwiremagazine sobre Plugins basados en jQuery para manipulación de tablas…. […]
[…] In: JQuery plugins 24 Dec 2009 Go to Source […]
[…] 25 plugins jQuery pour donner vie à vos vieux tableaux HTML […]
Very very useful. Thanks for this post
[…] Voi prezenta câteva dintr-o list? mai luuung? ap?rut? acum câteva zile pe TripwireMagazine: 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables. ?i am s? încep cu un efect banal, de “deschidere” sub o linie de tabel, util când vre?i […]
Where’s jqgrid? Probably the most flexible and advanced table plugin for jquery…
thanks very unique and useful post. It will help me a lot.
@Taha, Your welcome. Great that you find it useful!
[…] 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables Submitted by Nirhana […]
[…] This post was mentioned on Twitter by bkmacdaddy designs, S Bromfield. S Bromfield said: "25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables | tripwire magazine" ( http://bit.ly/4Gn68q ) […]
[…] This post was mentioned on Twitter by Paul Nash, Michael Davis. Michael Davis said: RT @kellsborojack: I've just read this: 25 Highly Useful jQuery Plugins Bringing Life back to HTML T.. http://bit.ly/6Xqvtp #jQuery […]
Social comments and analytics for this post…
This post was mentioned on Twitter by webdesign_feed: 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables:
Most people have turned their back to tables f… http://bit.ly/7ukJUu…