Home arrow HTML arrow 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
(Page 1 of 7 )

HTML tables are still frequently discussed on various mailing lists, forums and chat channels. Many people have realized that they are not the most clever method of defining the layout of a page.

However, it is still quite common not to use the latest markup available to make them more usable and accessible, and many inexperienced CSS users moan about styling issues. This article shows the evolution of HTML tables in Web development and provides examples of up-to-date markup and styling practices.

What we use(d) tables for

Web development would not be the same if HTML hadn't had a table tag. In the days before CSS, they were the only way to create multi column layouts, visually appealing menus and turn those pixel-perfect print-inspired screen designs into something people can see on the web. We got used to tables being a necessity, we learnt how to force browsers to display them correctly and generally thought we got that "web development" thing licked.

Tables used TABLE, TR, and TD elements and we were able to control them with the attributes align, valign, background, bgcolor, rowspan, colspan, cellpadding, cellspacing and border. We used all that--and transparent graphics--to create the look we were trying to achieve. Changing this look, or even re-arranging the whole page layout was a royal pain in parts unmentioned here, but we saw that as a necessary evil. Things turned bad when newer browsers came out, and our markup monsters started to fail. We stood there, blinking, and wondered what went wrong. Well, we used tables as visuals constructs, and we forgot what a table really is, that's what.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials