Home arrow HTML arrow Page 2 - HTML, CSS and Tables: The Beauty of Data

HTML, CSS and Tables: The Beauty of Data

Assistive technology gags when it encounters HTML tables coded by the old school methods. Using the new coding lets you make tables more accessible to your users, and it really isn't that much harder--just remember what a table really is. Chris Heilmann reminds us, and gives an introduction to CSS.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 97
November 17, 2004
  1. · HTML, CSS and Tables: The Beauty of Data
  2. · What is a table?
  3. · W3C to the rescue
  4. · Summary needed
  5. · Styling tables: the days of the spacer GIF
  6. · Embracing CSS and separating "what is what" and "what it looks like"
  7. · Our CSS

print this article

HTML, CSS and Tables: The Beauty of Data - What is a table?
(Page 2 of 7 )

When it comes down to the basics, a table is data. It is a construct that shows relations between data in a fashion that is easy to grasp and understand. One look is enough and we know what is what and what it connects to:

Flight Number:From:To:Departure:Arrival:
BA 3451HeathrowNuremberg19:2019:50
BA 1254LutonAlicante19:4020:50
LH 331HeathrowHamburg20:0020:20

This works swimmingly for anybody who has the table right in front of his nose and can see it. It is different though, when we cannot see the table.

Where tables fail and what we can do about it

Pick up the phone, and read out the above table to someone. You will find yourself repeating the above information over and over again. "Flight BA 3451 flies from Heathrow to Nuremberg at 19:20 and arrives at 19:50 and 1254 from Luton to Alicante at 19:40 and arrives at 20:50. You got that? OK. Flight LH 331 flies from Heathrow to Hamburg at 8pm and arrives at 8.20 local time."

For a short table like this, you can leave out some of the labels, but for long tables, you will end up with a lot to explain. For the person on the other side of the phoneline you can explain all that, web users who use text browsers or screen readers don't get that information. All they get is:

Flight Number: From: To: Departure: Arrival: BA 3451 Heathrow Nuremberg 19:20 19:50 BA 1254 Luton Alicante 19:40 20:50 LH 331 Heathrow Hamburg 20:00 20:20

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials