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.

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's Gravatar

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's Gravatar

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's Gravatar

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's Gravatar

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's Gravatar

Mario Rosch
Tue 11th Dec 2007
at 12:12 pm

Nothing intersting as for me

Demander's Gravatar

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's Gravatar

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's Gravatar

Zeb
Wed 19th Dec 2007
at 8:53 pm

Commenting is not available in this section entry.

A picture of Mark BoultonI'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 Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.

I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.

If you're after simple, clean and effective web design; let me know.