HTML Tables best practice
What is a table?
1) A thing to put bagles and writing materials on:
What is a table?
2) A city in France:
What is a table?
3) Data
Why tables rock
Tables rock for people who can see:
- They are most likely the easiest option to display complex data with relations to one another without any explanation
- They allow us to cram a lot of information in a small space without getting confusing
Why tables rock
If I can see the table, it is very easy for me to know what a value is:
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
- Avoid tables any time we can. If something is only one level, a list is easier to grasp than a table.
- Use the accessibility enhancements to HTML introduced in HTML 4.01.
- Make sure tables are not too complex and keep the amount of levels low.
- Cut up very complex tables into digestible chunks – headers and one level tables
What we can do – The good news
- 90% of the work of making tables accessible is happening “under the hood”
- This means the work will be done by your resident HTML guru:
What we can do – the bad news
- Every table needs a proper summary, captions and should look consistent
- Content management systems are likely to see tables as a visual construct and not offer these options
- It is up to the XML or database schema to force editors to enter this data.
What we can do – styling tables
Unstyled tables are hard to read:
What we can do – styling tables
Making it obvious what is data and what are headers makes it easier:
What we can do – styling tables
Distinguishing the different data sets makes it really easy:
Bad tables
- Put design before readability
- Confuse with a lot of colours not related to header / data cell pairs
- Go overboard on borders and different paddings
- Scale badly
- Have fixed proportions
Bad tables
Good tables
- Good tables give the visitors
- The data they wants as quickly as possible
- The connection to the headers
- The chance to compare the values
- Really cool tables
- Allow the visitors to filter information
- Allow to sort by column
- Allow pagination when the table data is HUGE
- Do not try to show all the information at once, but possibly come in several tables
Good tables
That is all… go surf!
- What are tables, their markup and how to style them:
- Creating accessible tables
- Why tables for layout are stupid: