
Table is an excellent way of presenting information, especially when a company wants to cite various prices for its services or products. For instance, some websites require users to sign up different levels of membership in order to access certain exclusive contents. They can present to users the distinct features that each level has to offer in a table-like format. Depending on the content, tables can be good for arranging many other kinds of data for deeper clarity other than pricing.
Creating a table is easy, but organizing data in an easy-to-understand tabular format together with an appealing layout is often challenging. Most of us have came across numerous tables on the net, and some of these can be rather plain-looking ones with no or minimal design whatsoever. However, we are about to show you that tables need not be such uninteresting and boring visual communication. It can be uniquely designed to suit your web content and stand out from the vast array of tables from websites all over the world. Also, we’ve put together a list of useful scripts to help you get the best of of table display.
Examples of Beautiful Tables
Placing data in cells often makes content presentation more organized. Here are some examples on how it’s done beautifully.
Crazyegg
This table captures attention by using a ‘pop-up’ design for its cheapest sign-up package.
Formspring
Similar to the Crazyegg example, the table attempts to focus viewers’ attention to the most popular subscription by highlighting it in green.
Jepco Storage
This is an interesting way of presenting info in the table: Using icons to signify the storage type of a particular address.
Heroku
Again, the use of creative symbols to illustrate the different packages.
Scripts and Tools to build better Tables
To assist you in your quest for the most presentable and functional table for your site, feel free to take a look at our compilation of links below which contains a number of useful scripts and tools as a guide.
Alternate Row Colors (Zebra Table)
- Zebra Striping in 15 Steps
Create alternative row colours in 15 steps with jQuery. - jQuery Zebra Table Demo
Making a Zebra Table by using jQuery.
Sort & Filter Table Data
- Using jQuery to Manipulate and Filter Data
Setting up tables, creating zebra rows, applying hover effect, filtering data and sorting columns. - HTML Table Filter
A filter grid bar is added at the top of the desired HTML table. It provides a "filter by column" feature to allow filtering and limits the data displayed within a long table. Works on tables with uneven rows. - Sorttable
Sorting a table using the DOM (Document Object Model). - Sort ‘n’ Scroll Table Javascript
The script that allows sorting of tables by merely clicking on a column head. - Tablesorter
Turn a standard HTML table with THEAD and TBODY tags into a sortable table without refreshing the page. It supports multi-column sorting as well. - TableFilter
Sorts and filters multiple columns. - TinyTable Javascript Table Sorter
Alternate row highlighting, header class toggling, auto data type recognition and selective column sorting are available in this script. Other features included are column highlighting, optional pagination, support for links, and date/link parsing. - Unobstrusive Table Sort Script
Another sorting script for table that provides for multiple columns sorting as well as highlighting of columns.
Grid Listing
- Flexigrid – Web 2.0 Javscript Grid for jQuery
Lightweight data grid that allows resizing of columns. It also features a scrolling data that matches the headers, and uses Ajax to connect to xml-based data source to load contents. - dhtmlxGrid
An Ajax-enabled JavaScript grid control that supports multiple datasources such as XML, JSON, CSV, JS array, and HTML table. - Extjs Framework GridView3
Affords standard panel features such as framing, buttons and toolbars.
More Useful Scripts
- 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. - Tablecloth
By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love. - Tree Table
Replicate a tree table using HTML.
Further Resources and Readings
Here’s a few more useful links about table styling.
- CSS Table Gallery – 98 CSS table styles you can download.
- Tutorial: Styling a Table for CSS- Some tricks for styling tables to make them appealing.
- Tables with Style – It might not seem like it but styling tabular data can be a lot of fun.
- Zebra Tables – Altering the appearance of a table to improve the ease of interpreting it.
- Zebra Table Showdown – How to create striped ("Zebra") background for tables.
- Top 10 CSS Table Designs – Ten most easily implemented CSS table designs.
Related Contents |
Sponsors |
|
Posted by hongkiat in Tools , at 07.23.09 |
|






















































Comments
Rahul Jadhav July 23rd, 2009
Great collection. Loved it
ReplyWebstandard-Team July 23rd, 2009
If you want more ways to srt tabledata, watch this article “7 ways to sort tabeldata with JavaScript”
Replyweb2000 July 23rd, 2009
Nice collection of examples and codes for unique table building here!
ReplyBeno July 23rd, 2009
Thank you for this article, great content.
Replydiseño comunicacion visual July 24th, 2009
Muy buen blog de diseño! great blog! thanks from Argentina.
Replyburgesscdb July 24th, 2009
Thank you so much!
ReplyEnrique Ramírez July 24th, 2009
Great collection! Some of these are not tables, though (3 of them, that I noticed). But they look amazing (and table-like) nevertheless.
ReplyWP Themes July 24th, 2009
Thanks for the list. Was actually actively looking for guides to implementing cool tables.
TableCloth is so cool.
Thanks, Mike
ReplyTalkVietnam July 24th, 2009
Thanks for sharing. It’s very useful.
Reply阿鸿 July 24th, 2009
Very resourceful content sharing. I usually avoid table in my blog :D
Replymiziology July 24th, 2009
nice hk..it’s will give me some inspirations..
Replynaz July 24th, 2009
great list! really love the protoshare type :)
ReplyWallpapers July 24th, 2009
Thanks for these example , really helpful for new developers
ReplyStrx July 24th, 2009
Add jqGrid to Grid Listing, thanks
Replycarol July 24th, 2009
I think that tables often get bashed whereas as you example shows – it is possible to have some really beautiful tabular layouts (tables).
Replyjinwee July 24th, 2009
Nice table layout design, maybe i can try add in to Orangesoft web design http://www.egnarosoft.com, i think should be great. Thanks HK.
ReplyLuis Lopez July 25th, 2009
Excellent examples, is really useful in this moment I’m working on an e-boutique, and i had to do some tables and i was thinking in some ideas.
ReplyThanks Hongkiat
Dinesh July 25th, 2009
Nice, Good examples
Replybeli July 26th, 2009
I did some HTML coding in the past and I have some experience in that line of work. I think that you did a great job here and that you have a really nice collection here.
ReplyWebdesign Stuttgart
parthiv July 27th, 2009
Cool, Thanks for sharing
ReplyVim July 27th, 2009
Great ways to present data and stats in a professional manner, would anybody happen to know if these are free?
ReplySam July 28th, 2009
Thanks for sharing these great examples, Crazyegg is my favourite.
Replyshumail August 1st, 2009
very nice collections
ReplyCSS Madness August 2nd, 2009
These are great examples! Thanks for the inspirational article on using tables.
Replysidd August 4th, 2009
nice and great
Replyangkasuwan August 5th, 2009
nice tables- simple yet effective
Replysidd August 7th, 2009
nice and usefull
ReplySean Hurley August 11th, 2009
These are great designs and perfect inspiration. I find its easier to come and view the posts at Hongkiat.com before doing a design then just starting from scratch.
Reply3dfan August 18th, 2009
Thanks for posting really useful info – I am a designer of 3d wallpapers of celebrities as jessica alba wallpaper and searched for this info for my work.
Replyweb design chennai August 31st, 2009
Thanks for sharing useful tips
ReplyAlexandre Broggio (Brasil) October 6th, 2009
thanks ^_^
ReplyKadam Chokshi November 19th, 2009
Really this is world best collection
ReplyTrackbacks