Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 02 2011

00:19

Extensive Collection Of Useful jQuery Plugins For Working With Tables

jQuery plugins are quite in these days in the field of web designing and are extensively used because of their aesthetically appealing results. Through jQuery tables plugins, you can attain the maximum results in terms of functionality and flexibility. The level of flexibility and functionality that jQuery provide cannot be met with classic HTML tables.

Here we are presenting a collection of exceptional and highly functional jQuery tables plugins that let you create user-friendly tables easily and efficiently. Enjoy!

Table Pagination

( Demo | Download )
This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

Tablesorter

( Demo | Download )
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.

Animated Sortable Data Table jQuery plugin – jTPS

( Demo | Download )
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.

Flexigrid

( Demo | Download )
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.

Animated table sort

( Demo | Download )
This plugin allows you to animatedly sort a table based on a column’s td’s, or on the content/value of a child/descendant element within those td’s. The various td’s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

HeatColor, a jQuery plugin

( Demo | Download )
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.

Collapser

( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements. Can create a accordion, list collapser using this plugin.

jExpand

( Demo | Download )
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.

Tree Table

( Demo | Download )
The treeTable plugin allows you to display a tree in a table, i.e. a directory structure or a nested list. Each branch in this tree can be collapsed and expanded, just like in a file explorer in most modern operating systems.

Table Drag and Drop

( Demo | Download )
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list. Individual rows can be marked as non-draggable and/or non-droppable. Rows can have as many cells as necessary and the cells can contain form elements.

jQuery charToTable plugin

( Demo | Download )
With this useful plugin you can convert characters to tables using jQuery.

Add Table Rows Count

( Demo | Download )
With jQuery rowCount plugin you can automatically add table row count column to your tables.

uiTableFilter

( Demo | Download )
uiTableFilter is a jquery plugin for filtering table rows.

Ingrid

( Demo | Download )
Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

JQTreeTable

( Demo | Download )
Take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it’s parent row, set some options, and let jQTreeTable take it from there.

PicNet Table Filter

( Demo | Download )
This jQuery plugin adds real time Google-like column filtering capabilities to a regular Html table. This is an open source project released under The MIT License (MIT).

TableEditor

( Demo | Download )
TableEditor provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

jQuery ColumnManager plugin

( Demo | Download )
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too!

CSV2 Table

( Demo | Download )
This plugin loads a CVS file (e.g. created using Excel) and creates a table with the contents in that CVS file.

JSquared

( Demo | Download )
JSquared Enables ability to add/remove HTML table columns and rows.

jQuery.kiketable.rowsizable

( Demo | Download )
This plugin, applied to n-tables of an HTML page, provides the behaviour of resizing rows by clicking over a “image handler”.

Graphtable

( Demo | Download )
graphTable provides the ability to graph the data in a simple HTML table using flot.

Grider

( Demo | Download )
Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features.

jQuery floating table header plugin

( Demo | Download )
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 the settings forceClass and markingClass.

LiveFilter

( Demo | Download )
LiveFilter is a very lightweight jQuery plugin that will filter either an ordered or unordered list and display only the results that match the supplied string.

TinySort

( Demo | Download )
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

Using jQuery To Manipulate and Filter Data

( Demo | Download )
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this tutorial, author will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Creating a “Filterable” Portfolio with jQuery

( Demo | Download )
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, you can learn how to make “filtering by category” a little more interesting with just a little bit of jQuery.

List Reorder

( Demo | Download )
List Reorder is a jQuery plugin that allows you to reorder any simple ordered or unordered list. List Reorder is easy to use and does not require any additional markup. Its look and feel is completely customizable using a set of CSS classes.

DragTable

( Demo | Download )
Maybe you want to sort the columns ascending/descending by clicking into the table-head. No problem! Use a handle to drag the rows.

FireScope Grid

( Demo | Download )
FireScope Grid is an open source (GNU Public License, v2) jQuery component that adds datagrid behaviors to your HTML tables, regardless of the server-side technology being used. Included in the plugin is a navigation bar that is automatically appended at the beginning or end of a table that enables users to page through results, filter results by any column or sorted on the fly without need to refresh the entire page.

Fixed Header Tables

( Demo | Download )
FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.

JGridEditor

( Demo | Download )
This jQuery plugin allow you to add on-the-flight cell editing functionality in your table You may configure it to perform AJAX queries and returning changed content or error messages.

pfSelect – click drag select for huge datasets

( Demo | Download )
This lightweight select plugin allows you to select elements easily by click-drag select, shift select or ctrl select within a huge dataset and without any speed decrease. It adds a mouseover event to each specified element (by default elements with class “selectable”) and doesn’t calculate any marquee rectangle as the Jquery UI plugin does. Therefore it has no performance issues with hundreds of elements. Use this plugin if you have tons of elements and you need fluid interactivity.

Sortable Tables

( Demo | Download )
jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI ARIA conform web applications based on the popular Java-Script framework jQuery (using the UI Widget Factory).

KeyTable

( Demo | Download )
KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.

Zentable

( Demo | Download )
Zentable is a plug-in for the jQuery Javascript library. It allows to show and manipulate tabulated data on a web page but with functionalities typically expected from native applications, as scrolling with the mouse wheel, resizing column widths or using keys to move through the data. It can be used with or without AJAX, but is using AJAX where this plug-in really shines.

jQuery Week Calendar

( Demo | Download )
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Brought To You By

Premier Survey
Do you want to advertise here? Click to get more info…

May 24 2010

20:43

40 Fantastic Pricing Tables for Your Inspiration

When selling a product or service online, a pricing plan is a not simply a portal the user has to click through to purchase their item. It allows you, as the merchant, do drive you’re deal home, and provide alternative deals that will secure you further purchases.

It follows then, that the pricing plan’s on your website shouldn’t be neglected, and should offer the most important information to the end-user, in an intuitive easy-to-use way. Below are 40 fantastic examples of pricing tables / plans that show how successful companies are engaging their users in their pricing plans, from simple tables, to feature lists, to make your own plan tools.

Each example briefly examines the pricing plan, so you can see for yourself what it is doing.

One Hub

Onehub goes with a common column layout with a highlighted column displaying their most popular plan.

Squarespace

Squarespace makes use of simple, yet bold icons, alongside beautiful typography to create a beautiful column style pricing table.

Bigcartel

Big cartel uses simplicity and elegance to get its pricing plans across, as well as subtly highlighting what the free plan misses out.

Shopify

Shopify uses a bold approach with a staggered gradient of color from green to blue to show the progression of their plans. Simple ticks are used to show the features of each plan.

Formstack

Formstack puts emphasis on its popular plan by giving it bright colours compared to its sister grey plans.

Notable

Notable uses a very simple and easy to read table, with a larger button, and wide stroke around their popular plan.

Mailchimp

Due to Mailchimps way of pricing, their tables appear in different formats, split into different sections.

Live Stream

Livestream keep their pricing table relatively clean, with more information available upon hovering over sections.

Wuffo

Wuffo uses its playful font and bright colours to attract you into their pricing table.

CrazyEgg

Like others, CrazyEgg focuses on their popular plan with the use of colour compared to grey columns.

Highrise

Highrise uses a simple and easy to read table, with a larger button, and wide stroke around their popular plan.

PulseApp

PulseApp uses three simple columns with very little visual graphics to emphasis the sign up buttons.

LighCMS

LightCMS has an absolutely stunning pricing table which hits you with its bright gradient of colour, but beautiful simplicity. The table is left uncluttered with common features between the plans all listed below.

Cobblestone

Cobblestone differs from some other pricing tables in highlighting its popular plan with a dark blue again grey, compared to bright colours against the light grey.

Backboard

Backboard draws its users in by highlighting plans with a 14day free trial, and driving home pricing after this.

Invoice Machine

Invoice Machine keeps to simplicity by using a simple table, and ticks to show exactly what features each plan comes with.

PlanHQ

PlanHQ’s simple table gets across simple information on the products information, and puts emphasis on the sign up buttons.

Concept Share

Like others, Concept Share puts it’s emphasis in colour on the free trial plan, to attract users into the features of the program by using it rather than tabling all the features.

Mediatemple

Mediatemple opts for less of a table approach, and more of a box approach showing three of their plans, with learn more buttons.

Mailer Mailer

Mailer Mailer emphasises its preferred plan with a “Best plan” ribbon, and a contrasting coloured button.

Litmus

Litmus uses a progression of images to emphasis where the quality is in their pricing plan with a gradual increase in screens in the heading images from left to right.

Sipgate

Sipgate emphasises its free plan with a different colour to the premium add-ons.

Yootheme

Yootheme emphasises the gold plan by using gold colours as well as brown in its larger centred popular plan box.

The Resumator

The Resumator puts emphasis on its sign-up buttons, with its featured plan receiving a border, and different coloured button for emphasis.

Poll Everywhere

Poll Everywhere uses a feature table with prominent sign up buttons to showcase it’s different poll plans.

Box

Box.net uses takes use of white and blue beautifully in its pricing table, subtly highlighting their popular plan by raising it above the rest ever so slightly.

Clicktale

Clicktale takes a different approach than other sits by ordering its most expensive plan far left, and the cheapest far right; a complete contrast to the normal.

Usabilla

Usabilla goes with a simple table with two bright colours, green and orange highlighting the price, and the sign up button.

Cannybill

CannyBill has opted to make user interaction more noticeable, with table columns zooming on mouse over.

NewsGroupDirect

This site opts to feature its most expensive plan on the left, highlighted with a bright green to instantly attract the eye.

Typekit

Typekit opts to make its popular plan stand out by subtly increasing the size of everything in the column.

Podcast people

Podcast people follows in shopify’s footsteps by using the gradient of columns from green to blue.

Vflyer

The downward arrows used by vFlyer help to draw the user’s eye down the page to the features, and beyond to the sign up buttons. Simple but effective.

PandaStream

Due to panda’s business model, they have to opt for custom pricing decided by the user. Their easy to use drag bar is beautifully implemented.

Groupsite

Groupsite uses the bright contrast of red and dark blue to attract your eyes through their pro pricing plan.

Browser Mob

Similarly to Panda, Browser Mob is more of a custom pricing plan, so with so many to offer, they’ve made it easier to choose, by allowing the user to input what they need, and the result showing their most suited plan.

Glasscubes

Glasscubes makes sure emphasis is strong on signing up, offering you the opportunity to do so at the bottom, and top of each pricing column. Their buttons aren’t too bright, so you don’t feel pushed into it.

Hellothemes

Hellothemes subtly draws focus to its featured plan with a heightened column, and beautifully done left and right shadow that add’s a bit of depth.

Varto

Varto opts for a vertical pricing table for its 3 pricing plans that render beautifully with some great imagery.

Further Discussion

This is simply a list of websites that I’ve come across, with impressive pricing tables in lets say, the last month. I’m certain there are plenty more fantastic examples out there, so if you know of some, don’t hesitate to discuss them below!

Sponsored post
feedback2020-admin
14:56

May 13 2010

12:00

Tables in web design

Here is a fresh batch of beautiful tables. It is really amazing how nice a table can look, especially considering the bad reputation tables seem to have developed.

http://webexpedition18.com/articles/tables-in-web-design-beautiful-examples-and-best-practices/

Tags: Tables

April 13 2010

09:05

jQuery HTML Table Toolbox

Advertisement in jQuery HTML Table Toolbox
 in jQuery HTML Table Toolbox  in jQuery HTML Table Toolbox  in jQuery HTML Table Toolbox

By Paul Andrew

In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do even more. Pretty soon the main use of tables was no longer tabular data, it was used as a handy and quick way to control the layout of a complicated web page. Yes, we loved it even more.

But that is were the love story ends and its bad rep begins.Using the table element for web layouts proved to be hard to modify, obtrusive and, more importantly, it caused major accessibility and usabilty problems. Thankfully, CSS came to the rescue, and HTML tables were duly dumped on the web design scrap heap. Tables were finally relegated to the position it was originally introduced for: Presenting tabular data.

Out of the box the tables are very, very bland, reasonably hard to style, its very difficult to display complex data effectively and you are limited to its basic functionality. This is were jQuery comes in, the every day web design super-hero.

In this article we present a collection of jQuery plugins and tutorials to help you get more out of your HTML tables. With the seemingly endless power of jQuery you can sort columns horizontally or vertically, have a fixed header, search the contents, paginate a large table, drag and drop multiple columns or even a plugin to make your table scrollable. You will find them all below accompanied by a quality selection of tutorials that will help you take things further.

It’s time to follow in love with HTML tables all over again!

jQuery Table Plugins

Flexigrid – Web 2.0 Javscript Grid for jQuery
Flexigrid is a lightweight but feature rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.
Similar in concept with the Ext Grid but built using jQuery, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Jquerytables 01 in jQuery HTML Table Toolbox

Chromatable JQuery Plugin
Chromatable is plugin that allows a large and detailed HTML table to have a fixed header, meaning that when the user scrolls down, the header follows them and stays in a fixed position.

Jquerytables 02 in jQuery HTML Table Toolbox

Ingrid, the jQuery Datagrid
Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your HTML tables.
Ingrid Demo.

Jquerytables 03 in jQuery HTML Table Toolbox

JQTreeTable
With the JQTreeTable plugin you can easily set which column from a HTML table to take the treeview effect, as well as setting which parents are initially collapasabile.
You have a highlight option can be set so that the rows change colour on hover, there is also dynamic striping of the rows, and there is also a state variable, which sets whether to keep the collapsed or expanded state.

Jquerytables 04 in jQuery HTML Table Toolbox

Scrollable HTML table
The Scrollable HTML table jQuery code can be used to convert ordinary HTML tables in into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, then you include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table. Nice and easy.
Scrollable HTML table Demo

Jquerytables 05 in jQuery HTML Table Toolbox

KeyTable
KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. It allows you to adopt Excel like cell navigation and it gives you features such as editing of a table without requiring a mouse.
You simply navigate to the cell you wish to edit and hit return.

Jquerytables 06 in jQuery HTML Table Toolbox

graphTable
The graphTable plugin lets you take a simple HTML table and turn the data in it into a graph using flot.

graphTable Demo

Jquerytables 07 in jQuery HTML Table Toolbox

DataTables
The DataTables plugin is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Features include: Variable length pagination, on-the-fly filtering, ulti-column sorting with data type detection, smart handling of column widths, display data from almost any data source and much more.

Jquerytables 08 in jQuery HTML Table Toolbox

jqGrid Plugin
jqGrid is an Ajax-enabled jQuery plugin that offers solutions for representing and manipulating tabular data. Since the grid is a client-side solution, loading data dynamically through Ajax callbacks can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.
jqGrid Demos

Jquerytables 09 in jQuery HTML Table Toolbox

Visualize: Accessible Charts & Graphs from Table Elements
Visualize is a plugin that can scrape data from an HTML table and generate charts using the HTML 5 Canvas element. This plugin is particularly useful because the data for the visualization already exists in the page in a structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

Jquerytables 10 in jQuery HTML Table Toolbox

Grider
Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features: It can make simple operations defined in the headers, add a row count to the table, summaries for average (avg), sum (sum), maximum (max) and minimum (min) and also works nicely with Ruby on rails nested forms.

Jquerytables 11 in jQuery HTML Table Toolbox

Adding Functionality to Tables

Table Drag and Drop
This TableDnD plugin 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.

Jquerytables 12 in jQuery HTML Table Toolbox

Table Pagination
TablePagination is a plugin so that you can auto add a pagination element to the bottom of a HTML table with a variety of settings to customize the elements.

Jquerytables 13 in jQuery HTML Table Toolbox

tableRowCheckboxToggle
tableRowCheckboxToggle generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or CSS classes in the script.

Jquerytables 14 in jQuery HTML Table Toolbox

BS Table Crosshair Plugin
The BS Table Crosshair Plugin automatically highlights the cell that you hover over giving a 'crosshair' effect by simply assigning an ID to the table.

Jquerytables 15 in jQuery HTML Table Toolbox

jqtable2csv
This small plugin provides conversion from a HTML table to a CSV string. There are two parameter only: callback and delimiter.
The delimiter parameter provides which column delimiter should be used in the csv string and the callback parameter(a callback function) contains one argument which is the csv string so you can do anything you want with the generated string.

Colorize
Colorize is a jQuery plugin that can add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column upon hover. You can colorize as many table rows or columns as you want. A repeat mouse click will revert the row/column to the original background color.

Jquerytables 16 in jQuery HTML Table Toolbox

jExpand
jExpand is an ultra lightweight plugin that will make your tables expandable. Very useful for business apps, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

Jquerytables 17 in jQuery HTML Table Toolbox

columnHover
columnHover is a plugin that highlights the entire column in a table while hovering over them and it even supports colspans and rowspans.

Jquerytables 18 in jQuery HTML Table Toolbox

HeatColor
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.
You can bind a collection of elements such as table rows, divs or list members to Heatcolor and let it do the work.

Jquerytables 19 in jQuery HTML Table Toolbox

Fixed Header Table
This is yet another jQuery plugin to provide fixed headers for tables. It differs from the othere in that it does not require any odd html table semantics. It just needs a TABLE tag with THEAD and TBODY to work its magic.

Jquerytables 20 in jQuery HTML Table Toolbox

Table Search & Filtering Plugins

tableFilter
This is not the most powerful plugin you could find nor does it offer much configurability, what it does it give is an easy to install simple and basic table filtering feature.

Jquerytables 21 in jQuery HTML Table Toolbox

uiTableFilter
uiTableFilter is a small plugin for filtering (hiding) table rows based on their text contents.

Jquerytables 22 in jQuery HTML Table Toolbox

Tablesorter 2.0
tablesorter is a plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without having to refresh the page. It can successfully parse and sort many types of data including linked data in a cell and even has support for multi-column sorting.

Jquerytables 23 in jQuery HTML Table Toolbox

PicNet Table Filter
This jQuery plugin adds real time Google-like column filtering capabilities to a regular HTML table.
Currently the picnet.table.filter.js only supports two kinds of filters. The first and default is 'text' which just produces a text box for context sensitive text matches. The second is 'ddl', this produces a drop down list that allows the selection of a single item within that list.

Jquerytables 24 in jQuery HTML Table Toolbox

jQuery tinysort
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

Jquerytables 25 in jQuery HTML Table Toolbox

LiveFilter 1.1
LiveFilter is a very lightweight plugin that will filter either an ordered or unordered list and display only the results that match the supplied string. It is well documented and designed in a way in which it is very easy to understand for designers to use and install.

Jquerytables 26 in jQuery HTML Table Toolbox

jQtablesearch
jQtablesearch is a plugin for filtering large data sets with user input by searching through tables, lists, etc, very very quickly.

Jquerytables 27 in jQuery HTML Table Toolbox

Quicksearch
This is a jQuery plugin that adds a simple search widget in a HTML table element.

jQuery Live Editing

TableEditor – Flexible in place editing of TableSorter
The TableEditor plugin provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

Jquerytables 28 in jQuery HTML Table Toolbox

jGridEditor
This jQuery plugin allow you to add on-the-fly cell editing functionality in your HTML table.
You may configure it to perform AJAX queries and to return dynamic content or error messages.

Jquerytables 29 in jQuery HTML Table Toolbox

jQuery Table Tutorials

jQuery Table Manipulation
This tutorial covers one of the most common tasks performed with tabular data and that is sorting. In a large table, being able to rearrange the information that you're looking for is invaluable. Unfortunately, this helpful operation is one of the trickiest to put into action, this tut will show you how.

Jquerytables 30 in jQuery HTML Table Toolbox

Drag, drop and sort table rows with jQuery
This tutorial shows you how to add controls to a table that when clicked can move a table row (TR element), up and down within a table.

Jquerytables 31 in jQuery HTML Table Toolbox

Displaying and sorting/paging tabular data using the JQuery tablesorter plugin, and query objects
One of the more repetitive tasks a server side developer encounters is displaying the results from a query. This is traditionally in the format of a table that displays the rows of data, along with any other functionality, such as paging controls and sortable headers. This detailed tutorial into using the excellent TableSorter Plugin.

Jquerytables 32 in jQuery HTML Table Toolbox

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table
On Crazy Egg's pricing table when you click on "Sign Up" for an option, that plan's column highlights, the other plans vanish, and a signup form takes their place – There is a number of impressive things happening within this small area. Using CSS, jQuery, and images in clever ways, this thorough tutorial will show you how to recreate these tabular effects.

Jquerytables 33 in jQuery HTML Table Toolbox

Click Table Row to Trigger a Checkbox Click
This tutorial explains how to toggle a checkbox within a table row when the user clicks anywhere within the row.
This technique can be implemented with other elements as well, such as clicking on a containing element to trigger the click of an element inside it.

Jquerytables 34 in jQuery HTML Table Toolbox

Table Striping Made Easy
The concept of this tutorial is to create stripes on a table and then have the background of each row change color when your cursor rolls over.

Jquerytables 35 in jQuery HTML Table Toolbox

Using jQuery To Manipulate and Filter Data
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, you will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Jquerytables 36 in jQuery HTML Table Toolbox

Resourceful Reading

April 09 2010

12:00

Pricing pages

If your in the process of designing the web site for most any type of online software product, chances are you will need a page to show the various pricing options of your product. This set of samples provides a screen shot of probably every app you would check out anyway, so save some time and browse this fine collection.

http://www.splashnology.com/blog/inspiration/390.html

April 06 2010

12:00

Pricing & Comparision Table Designs

This nice set of table designs focuses on lots of pricing and comparison tables for products (mostly software ones). Just goes to show how much paying attention to all the details can pay off and result in a fantastic design.

http://www.tuttoaster.com/showcase-of-excellent-tables-and-best-practices/

Tags: Tables

March 08 2010

14:00

Table designs

Janko at Warp Speed has a fantastic write up and sample set of table designs. This is another one of those commonly neglected web elements that can really be beautified rather effectively.

http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

Tags: Tables

December 28 2009

10:37

Data Tables In Modern Web Design


By Matt Cronin

Being able to organize data and information is a skill not to be overlooked. The way you organize content and text, generally referred to as copy, has a direct effect on how that content is received by users. You must find a way to organize information so that it is scannable and can be quickly absorbed by the reader. One way to organize information in a clean way is to use data tables. Data tables provide a structured way of showing large amounts of information.

Data tables have been in use since the beginning of Web development. The structure of the table hasn’t changed — and will not change, because, well, it’s a table. But even though the structure has stayed the same, styling has come a long way; and recent tables are just as readable as the early ones.

Cleartrip in Data Tables In Modern Web Design

Common Uses Of Data Tables

Tables make organizing information in a clean and readable way very easy. They can be used to store and show large amounts of information, small amounts of information, static data and even data that is constantly changing.

Because of the chart-like layout of tables, they are extremely useful for making comparisons. Many websites use them to compare products, services and, as mentioned, pricing plans.

The table below on Apple’s website compares all of the MacBooks. The chart contains a large amount of information, yet it is still organized and easy to read through. It is an extremely simple table but looks nice because of the good spacing and borders. Also, notice how images of the laptops are included and important information is bolded. This makes the table very scannable.

Macbook in Data Tables In Modern Web Design

Data tables are often used to compare pricing plans. They provide space to show the names of plans, prices and the unique features of each plan. Most often, tables showing pricing plans contain a column for each plan and a row for each feature. Then, inside each cell is a marker indicating whether the plan comes with that specific feature.

Finally, tables often appear on TV network websites to shows schedules. These are a little different than typical tables; the cells are of various sizes due to staggered viewing periods. Other than that, schedule tables follow the exact same structure.

Components Of A Useful Data Table

Although almost every user knows how to make sense of a table, you can still do a few things to take yours to the next level of usability.

Titles + Labels + Data = Data Table
Obviously, a data table consists of columns titles, rows labels and the actual data in the cells. A table should be nothing more and nothing less.

When adding color, you should make the cells contrast with labels and titles. Make the background color for labels and titles different than the one you use for core data. This makes the table much easier to read and eliminates confusion.

The table below by Goplan uses a darker color for column titles and row labels. Notice how reading this table is much easier because of the contrast.

Goplan in Data Tables In Modern Web Design

Stick to a Simple Grid
All tables are grids, and they work nicely that way, so why do anything different? Grids are efficient because you can fit a large amount of information in a small area and the viewer is still able to read the content easily.

Use Icons
Icons are an excellent way to cut down on boring text on a page. Icons can also help organize data tables.

The table below makes excellent use of icons and looks very clean. Check marks and crosses are used instead of “Yes” and “No.”

Mt in Data Tables In Modern Web Design

Don’t Leave Blank Spaces
Tables often have cells to which data does not apply. Avoid simply leaving these spaces blank; instead, fill them with an marker, such as a cross (X), icon or, as in the table below, dashes.

This clean table uses three dashes to indicate that data does not apply to a cell; this looks much nicer than leaving an empty space.

Backboard in Data Tables In Modern Web Design

Highlight Important Columns and Rows
Many data tables highlight columns and rows that provide particularly important or useful information. In pricing charts, you will often see the best plan highlighted. Take a look at the table below. The most important row — the schedule for the day on which the table is being viewed — is highlighted with a thick border and different background color.

Abc in Data Tables In Modern Web Design

Working With Larger And More Complex Data Tables

So far, we have focused mainly on small and simple data tables, but what about large, complex and data-heavy tables? There are many usability considerations that are specific to large data tables.

Make Columns Movable
Data tables figure prominently in many software applications, both Web-based and installed. Generally, developers will create tables so that columns can be moved and organized in any way desired by the user. Also, applications usually allow users to add and remove columns.

Allow for Reordering of Columns
In tables with a lot of data or data that changes frequently, you should give users the ability to reorder content and cells. The most common variables by which you can order data include date, alphabet and importance.

Provide Search for Large Tables
If data is extensive and the table very large, then a search box should be provided. This will improve the overall usability of large tables and make finding data much faster.

Provide Different Views
If your table contains information with thumbnail images or other visual content, another usability feature you can include is the ability to view that information in different ways. Provide options to view all text, both text and thumbnails or only thumbnails.

Take a look at this Flash-based data table. It provides many of the features that work well with large tables, as mentioned, including search, reordering options and different views.

Flex in Data Tables In Modern Web Design

Styling Data Tables

Styling, or lack of styling for that matter, plays a big part in how a user views a table and absorbs the data. Keep in mind, though, that it’s still only a data table and should not be overloaded with styling. Keeping it simple and readable should be your overall goal. Shadows and artistic borders may work with other elements in a layout, but stay away from them with data tables. Here are a few styling elements that work better for data tables.

Alternate Colors
The most important characteristic of any data table is readability. One way to achieve this is by alternating colors for columns and rows. This makes it easier to read and more scannable.

The data table below is very well laid out. The rows of the table alternate colors, providing a clean, flowing, efficient layout. It has a lot of information but is still readable.

Mint in Data Tables In Modern Web Design

Borders
Separating cells with borders is extremely important. Borders make data much more readable and can eliminate confusion. With a lot of information, data in different cells can seem to blend together as one, but you want to keep them separate.

Ample Spacing
Like borders, spacing between data contributes to usability. In each cell, leave sufficient padding between the border and data. Use at least 20 pixels of space.

Simple Background Colors
Good data tables are all about readability, as we keep saying. Color and readability often go hand and hand. Data tables should always be simple, and one way to be simple is to use simple colors. Avoid using bright, obnoxious background colors that reflect poorly on the data being presented.

Showcase Of Data Tables

As promised, here are some websites that get data tables right.

Quantcast
A clean and basic table with nice fonts and a good color palette.

Quancast in Data Tables In Modern Web Design

JukeFly
A large Flash-based data table with many usable features and user-friendly styling.

Jukefly in Data Tables In Modern Web Design

eWedding
A beautifully styled table that is still clean and readable.

Ewedding in Data Tables In Modern Web Design

Media Temple
A minimalist table with good use of icons, which provide an effective visual alternative to text.

Mt1 in Data Tables In Modern Web Design

iTunes
Data tables are everywhere, not just on the web. Applications such as iTunes use data tables.

Itunes in Data Tables In Modern Web Design

Mosso
A very nice table, with pleasant colors and icons and alternating background colors for rows.

Mosso in Data Tables In Modern Web Design

Zibler
A data table made with Flex that has search, movable columns and reordering options.

Zibler in Data Tables In Modern Web Design

Cleartrip
Here is a complex table with a lot of information, but it can still be read with ease. Also note that the table has sorting and ordering options for columns.

Cleartrip in Data Tables In Modern Web Design

Realmac Software
Shopping cart areas are also built on a grid system. Here is one example from Realmac Software.

Realmac in Data Tables In Modern Web Design

MT Support
This table makes good use of color and contrast.

Mt2 in Data Tables In Modern Web Design

CBS
Here is the CBS Network’s schedule.

Cbs in Data Tables In Modern Web Design

Long Term Clients
A smooth table with excellent styling, a clean layout and alternating colors.

Newspond in Data Tables In Modern Web Design

Media Temple
Another nice table from Media Temple, this one combining visual elements and text in a flowing table with readable data.

Dv in Data Tables In Modern Web Design

Fox
A data grid is used for the schedule on Fox.com. Notice again how the schedule for the current day is highlighted.

Fox in Data Tables In Modern Web Design

Quommunication
Many forum home pages are structured as a table. Here is just one example.

Forum in Data Tables In Modern Web Design

Viget
A well-structured and well-organized table.

Viget in Data Tables In Modern Web Design

Joomla! Forum
Another example of a table on a forum landing page.

Forum2 in Data Tables In Modern Web Design

About the Author

Matt Cronin is a freelance Web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.

(al)

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...