Home arrow HTML arrow Page 5 - 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 - Styling tables: the days of the spacer GIF
(Page 5 of 7 )

In the old days of Web design, a table was styled with visual elements and attributes--markup that defined how something looks rather than what it is. As CSS was not yet defined, and browsers rendered attributes differently, we were forced to create lines, margins and paddings with "spacer" images--transparent GIFs that allowed us to set a width and height to their parent elements and allow the background colour to shine through.

This resulted in huge tables, both concerning line count and file size, and changes had to be repeated in each document. Our example table using spacer GIFs turns out to be almost 10KB and 215 lines of HTML markup.

Out with the spacer GIF - in with the (now deprecated) attributes

When the browsers of the third generation mercifully went the way of the Dodo bird, we were able to use HTML properties more cleverly to avoid all the overhead of spacer images. Padding and spacing together with a clever use of background colour allowed us to cut down our table to become roughly 2KB and 35 lines of markup. Yet we still had to replicate the color information and padding for each table and each table element.

CSS to the rescue

With the 5th (and partly 4th) generation of MSIE coming out, we were able to use CSS properly for the first time. CSS allows us to keep the visual presentation information in a single file that gets applied to all the HTML documents. Changes can be applied a lot easier that way and we can keep the HTML free of presentational elements and attributes.

Sadly enough, however, a lot of developers didn't grasp that these newer browsers also support the aforementioned "new" table elements and attributes, and simulated these by applying classes to each element. These tables suffering from "classitis" failed miserably in conveying the flexibility of CSS. Classes became the new font tags. This is still the case for a lot of WYSIWYG tools these days. Our example table suffering from classitis amounts to about 700 bytes of CSS and 1.3K of HTML data in 44 lines.

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