W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2003

Re: Why are nested tables that bad

From: Matt May <mcmay@w3.org>
Date: Mon, 13 Jan 2003 22:30:55 -0800
Cc: "'W3C-WAI-IG List'" <w3c-wai-ig@w3.org>
To: jim@jimthatcher.com
Message-Id: <BC328EE4-2789-11D7-AE4E-000393B628BC@w3.org>

On Monday, January 13, 2003, at 04:29  PM, Jim Thatcher wrote:
> Matt suggested: "Nested tables throughout a site are a red flag that
> design teams are stuck in a rut of outmoded markup practices." I think
> nested tables are indeed a red flag; that CSS implementation is
> inadequate - not that design teams are stuck in a rut. On a redesign of
> my site I spent 4 days trying to get my intended design to work with
> CSS. I gave up. Yes, this design team was stuck. Here's the sample 
> page:
> http://jimthatcher.com/webcourse1a.htm. I challenge anyone to get that
> design to work with CSS.

Well, since I hate to back down from a challenge (erm, once a year or 
so)...

http://www.bestkungfu.com/jtcom.html
(this link will not be archived longer than a week.)

This validates XHTML 1.0 Strict, and uses no tables. I took about an 
hour to work on it, so I'm excusing myself from pixel-perfection (or, 
for that matter, CSS best practices such as consolidating repeated 
statements, making useful IDs and classes, and linking to rather than 
embedding a style sheet). But I did make an actual ordered list of your 
links, which should help in any case.

I don't intend to suggest that this is _ideal_ at this point; merely 
that it is possible. The most popular argument I've heard against 
learning CSS is that such-and-such is impossible, and that is often 
times not true. CSS does take time to learn to do well, but it is well 
worthwhile. (And yes, I would have said that even if they weren't 
paying me.)

One thing I want to recommend here is the CSS used for the link bar. 
It's possible to flow links in a bar together with very minimal HTML 
and CSS. For example:

HTML:
<div class="topnav">
<a href="">Home</a>
<a href="">About</a>
<a href="">Services</a>
<a href="">Resources</a>
<a href="">Contact</a>
</div>

CSS:
	.topnav a { display: block; float: left; width: 20%; text-align: 
center; background-color: black; color: white; text-decoration: none; 
font-family: Verdana, sans-serif; }

You can stylize each link with borders, etc., but this is much easier 
to deal with and keep up than throwing them in tables. (A bonus: when 
you declare the A element as a block element using "display: block", 
the entire area is clickable, not just the word.)

-
m
Received on Tuesday, 14 January 2003 01:30:13 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:08 GMT