December 7th, 2007
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.
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!
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).
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.
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.
The Web 2.0 Expo in Berlin was really amazing, i canßt wait for the Web 3.0 ;-)
Nothing intersting as for me
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.
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.