HTML Tables best practice

What is a table?

1) A thing to put bagles and writing materials on:

Picture of a table

What is a table?

2) A city in France:

Map showing 'la Table' in France

What is a table?

3) Data

Lt.Cmdr Data © Paramount

Why tables rock

Tables rock for people who can see:

Styled data table

Why tables rock

If I can see the table, it is very easy for me to know what a value is:

Table with arrows showing how a visual user can connect data to headers

When tables fail

When I cannot see the table, or when my user agent does not support tables, I get this:

Interaction Architecture Team MemberIn Company sinceSkillPromotion likelinessSelf MotivationWillingness to help othersAttention span Stephen200496%39%32%57%126 secCynthia200542%2%50%93%323 secRavinder19870%99%7%84%343 secSamuel198981%63%94%82%159 secKjell19834%51%81%33%319 secStephanie198526%68%54%8%233 secPanagiota198461%89%30%22%67 secAnsgar20017%85%86%63%107 secBjoern199273%50%83%15%137 secMortimer19840%27%92%86%243 secKim200193%27%17%28%182 sec

What we can do

What we can do – The good news

The HTML guru (cartoon)

What we can do – the bad news

What we can do – styling tables

Unstyled tables are hard to read:

Unstyled, hard to read table

What we can do – styling tables

Making it obvious what is data and what are headers makes it easier:

Coloured table with visible headers

What we can do – styling tables

Distinguishing the different data sets makes it really easy:

Styled data table

Bad tables

I am a barbie girl commercial

Bad tables

Example of a colourful, confusing table

Good tables

Data, functioning in acceptable parameters

Good tables

Accessible version of the same table

That is all… go surf!