Journal
Typesetting Tables at 24ways
I was thrilled to be asked by Drew a few weeks ago to pen something for this years 24ways. I’ve mentioned typesetting tables in a couple of presentations recently, notably, @media and the Web 2.0 Expo in Berlin. However, due to time constraints and the breadth of material I intended to cover, it hasn’t been possible to cover typesetting tables in the depth I wanted to. Until now.
As I say in the article, typesetting tables is often overlooked for a number of reasons, although it’s mostly because it can be tedious, time-consuming and, therefore, dull. But the devil really is in the details, especially for information and data in tables. Tables are not read like sentences. They’re scanned horizontally and vertically and have to be designed to help the reader do this. It’s not a time for eye candy. I tried to explain some simple rules that I apply when designing tables. I’m not saying this is the only way to do it, it’s just my way.
Anyway, hope you enjoy the article.
Most recent entries
- Don’t screw with conventions
- Design isn’t about tools
- Where’s the D in D&AD?
- Coolspotters: Where people and products meet
- Alys Rose Boulton
- abcdefghijklmnopqrstuvwxyz
- From Poly to Pole
- Ten Crimes Against Web Typography (and how to avoid them)
- Start Your Own Business
- Coolspotters and Garcia Media
Categories
Search
Journal feeds
Books
Stuff I like
Powered by Expression Engine



I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for
Comments
Ah, fond memories of sunny Caerdydd brought back with the timetable example.
Really interesting article - tables have had a bit of a beating in the past few years but still serve a vital purpose and are not just there for data. I like Ginny Redish’s premise that tables are there to answer questions on websites (what train do I catch to get to Penarth in time for a stroll along the pier?).
Definitely no need (yet) to throw the tables out of the bath with the pre-web standards bath-water and now they can look finely polished to boot!
Cole Henley
Fri 7th Dec 2007
at 2:35 am
I agree that horizontal shading is overused and inappropriate for this table, but something needs to be done to indicate that the wrapped row headings (rows 5 & 6) are not actually separate rows (e.g. tighten the leading.) That would have eliminated my initial confusion: “why are some cells blank and others have ‘--’ to indicate that they are blank/zero?”
Note also that the last four versions of the table have their grid screwed up (in particular, the sixth row from the bottom).
Brian
Fri 7th Dec 2007
at 5:35 am
On our new site, horizontal shading is included on all tables. They were put there for the wide tables, but are being left on the small tables for consistency.
Fortunately, though, the shading is light and gets darker on a hover over.
Fahed Bizzari
Fri 7th Dec 2007
at 8:42 am
Good article Mark. Tufte’s Envisioning Information makes for excellent further reading on table setting:
http://www.edwardtufte.com/tufte/books_ei
After the bad old days of HTML I still feel a pang of guilt when making a table - even if its for the right reasons.
Jon Rowe
Fri 7th Dec 2007
at 11:32 am
The Web 2.0 Expo in Berlin was really amazing, i canßt wait for the Web 3.0 ;-)
Mario Rosch
Tue 11th Dec 2007
at 12:12 pm
Nothing intersting as for me
Demander
Wed 12th Dec 2007
at 10:03 pm
Tables are definitely not dead! Long live the tables! Tables are at least comprehensive for regular people compared to CSS, which requires knowledge and skills of a professional.
Helen
Thu 13th Dec 2007
at 8:57 am
I always found it the most time consuming job when it comes to formatting information and data inside tables. Hope these tips can make my life a bit easier.
Zeb
Wed 19th Dec 2007
at 8:53 pm