/CSS/ Produce perfect tables
30/11/2007 | Filed under Develop > CSS
The table has been discarded by some web designers, but Craig Grannell wants to drag it back into use with strong structural markup, some natty JavaScript and CSS
These days, tables are the web element that designers love to hate. “You use tables for layout?” they ask, helpfully following this up with “You idiot!” when a positive response is uttered. However, the truth of the matter when it comes to tables is that, historically, most designers have not only used them for the “wrong” tasks (such as structural page layout), they also haven’t used them to their full potential.
In this tutorial, you’ll find out why the lost art of tables is worth revisiting. I’ll show you how to create a table that includes important accessibility elements, and uses CSS to improve its appearance and boost usability. The table itself is going to be a straightforward four-column design that lists a selection of magazines from Future Publishing, along with their category, editor and current issue at the time of writing.
About the author:
Name: Graig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
My favourite superhero is… Hellboy
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
jon / 02/12/2007 / 08:48 / http://pinaslink.com
yup, tables aren't dead... it still remains a powerful tool
John Yellow / 02/12/2007 / 22:06 / http://adsseeker.com/
A very interesting tutorial, thanks. I always believed that tables nowadays are treated a bit unfair and associated with something wicked and evil. Some of the solutions provided here look really neat and nice, and I'm quite tempted to apply them in my own designs. Hopefully my colleagues won't crucify me for it :)
Andre / 07/12/2007 / 22:36 / http://www.andreliem.ca
Thanks! I like the design so I'm going to incorporate it into my new web admin application... I agree that tables serve an important use...
Tom / 14/12/2007 / 12:36 / http://www.tomhorner.com
Thanks for the Tutorial. On a side note, your link is broken. If you click on the image it links to last months PDF file. The text based link works fine however.
Gerry Anderson / 31/03/2008 / 18:23 / http://www.registrycures.com
I've found that Yahoo! grids layout has allowed me to create most of the layouts I used to have to resort to tables for. I agree that tables aren't dead, but I think they should be used for their intended purpose: displaying and organizing data. That being said, your tutorial provides a great way to make tables more accessible. Thanks!
Daniel Foster / 08/04/2008 / 18:39 / http://www.pcfastlane.com/
This was a good read. I still use tables for some elements of my sites on a day-to-day basis, and am glad some web designers out there still think they are useful.
Stuart Robson / 30/04/2009 / 21:16 / http://www.alwaystwisted.com
Great Article, any ideas how to do this with multiple tables of data on a page???
