Tables in Web Design: Beautiful Examples and Best Practices
written by Nikola LazarevicTables are very important parts of user interfaces but often overlooked. They are perfectly suited for use on the web for displaying tabular data. Their purpose is to make that data readable, scannable and easily comparable.
One of the most common places to find tables online, is on application’s pricing pages, web hosting companies pricing pages and so on.
Many people find tables full with information boring, but clever designed table, can not only make a table very attractive, but it can also increase readability.
In this post I’m going to show You beautifully non-boring designed tables!
Tables designed using traditional table tag
MailChimp
As you can see from the examples above, tables not necessery needs to be boring. If you want to start creating kick-ass looking tables take a look at following: Along with the best web design you have, its very important to have best web hosting too. Check for the best web hosting reviews here. Pass your 650-393 on first attempt using cisco training and other resources. We offer 100% success in real exam with up to date 70-680 prepared by experts. You can also find pass4sure 70-450 & cfa exam on our site.
Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.
Shopify
Formstack
ThisWebHosting
Wufoo
Indianic
Tables designed using div’s and lists
Squarespace
Livestream
Ballpark
Media Temple
Notable
Rocket Theme
YOOtheme
Litmus
The Css Awards
BuySellAds
Build With Me
Tutorials
A CSS styled table version 2
Basic table styling
Tables with styles
Bring on the tables
Expand table rows with jQuery
22 Comments
ADD COMMENTHesham @ How to Blog says:
May 11, 2010The good thing about this post is I am needing this a lot, I am actually working on a new project and wanted to find more of these clever designed tables ;)
Michelle says:
May 11, 2010Some really nice examples here and a very useful post. You do not realise how difficult designing tables is until you have to do one yourself…you want it to look good but you also need to put across information in a simple format which people can glance at and understand. I recently designed my first table for a client…
http://ocurem.com/why-join/
Check it out :)
Nikola Lazarevic says:
May 12, 2010You created really nice table Michelle.
Federica Sibella says:
May 11, 2010Nice examples, thank you for sharing. It’s very difficult nowadays to find inspiration for designing tables since they are less used than some years ago, but I think that with a goo CSS and some jQuery we can do miracles also with table design!
If you would like to take a look, here’s the last table I designed for a client website: http://www.albergogiardinetto.it/en/rooms.html
Nikola Lazarevic says:
May 12, 2010Nice and clean Federica. Good job!
Simone D'Amico says:
May 11, 2010Great job Nik.
This showcase is fantastic! :)
Joe says:
May 11, 2010Nice looking tables there, even the traditionally designed ones. I still use HTML tables. Since CSS, HTML tables have been frowned upon by the design community. But HTML tables have worked great for years before CSS. I say, if it ain’t broke, why fix it?
Joe says:
May 11, 2010Oops, I forgot. Besides tabular data, tables can be used for some interesting effects with images, if you have a little imagination :-)
Ben says:
May 11, 2010Nice collection here! Great idea for a post!
Carolyn King says:
May 12, 2010Great examples of information design. The humble table is so often forgotten! Good designs like these make a massive difference to usability.
nando says:
May 12, 2010Thanks for the sharing, Nikola. This is a great showcases for the inspiration
sarah says:
May 12, 2010Really enjoyable. I’m just looking for tables inspiration, i really like shopify table.
Michela says:
May 12, 2010Interesting reference, tables are often an overlooked element.
I like Shopify and Livestream very much.
Mars says:
May 12, 2010this is great reference mate, thanks for this
Nikola Lazarevic says:
May 12, 2010Thank You all for finding time to stop by, take a look and comment.
PixelCrazy says:
May 13, 2010Wow! thanks for sharing the tables in web designs. I can see that they have been used in a very creative and useful way. This requires sincere efforts + the compact form of information which should be clear enough and self sufficient
Inspiring Design says:
May 14, 2010Im’ working on a fairly big project with a weird deadline… Inspiration has been lacking lately due to whatever twist of destiny. Where to find inspiration? Right here, I tell you! Thank you for the great post, came in super handy.
Divyesh Ardeshana says:
May 14, 2010It is really good layouts. For compare products.
Thanks
Nikola Lazarevic
Yorkshire Web Design says:
May 17, 2010Great article, good source for inspiration, thanks for putting together. Ted
sriganesh says:
May 19, 2010nice and unique collection ever one made, i view this type of collection first time thanks for sharing :D
Las Vegas Web Design says:
July 29, 2010I love the design of those tables. Nice list! Las Vegas Web Design
Des says:
February 14, 2011Still a huge fan of tables. The really cool thing about them when building into a site is that you can sort data in alpha order in a table in 1 click!