HTML Tables vs. CSS

[JackWolfgang]

Last night I was working on the following web site which is not a church web site:

http://home.alltel.net/jackwolfgang/resume/

However, I thought of an issue that affects church web servants.

Which is better, HTML tables for columns or using Cascading Style Sheets (CSS) to create columns.

Points to ponder: site-wide updates, accessability, browser compatibility...

On browser compatibility, the page works under Internet Explorer (IE) 6 and FireFox 1.0 running on Microsoft Windows. As for non-CSS compliant browsers, there is a link to a completely non-CSS page encouraging the person to upgrade their browser. The link is hidden by CSS for CSS compliant browsers. To see the link on FireFox, if you have the Web Developer extension (which is very useful), click "Disable Styles" on the "Disable" menu button.

I'd appreciate your thoughts on this subject.

[devoted]

My thoughts:

There is, indeed, quite a debate about this issue among website designers, but I think the underlying context often is the excessive use of nested tables and spacers (e.g., transparent gifs) to precisely position elements on a webpage. With this in mind, the argument would be: It's better to use CSS to position elements instead of using excessively nested tables and spacers.

Excessively nested tables take longer to render, and cause accessibility problems. (Screen readers used by the blind would have a hard time correctly interpreting the layout.)

But that doesn't exactly respond to your original question. I feel that if you know CSS really well, use CSS -- but be sure to add the tabindex attribute to links to ensure motion-impaired people can tab through the page. (Because, with CSS, content doesn't have to be in the same order in the HTML code as it renders.) For the rest of us (that includes me), I feel that a few simple nested tables is a perfectly OK way of laying out a page.

-- David Gillaspey

[JackWolfgang]

My thoughts:

There is, indeed, quite a debate about this issue among website designers, but I think the underlying context often is the excessive use of nested tables and spacers (e.g., transparent gifs) to precisely position elements on a webpage. With this in mind, the argument would be: It's better to use CSS to position elements instead of using excessively nested tables and spacers.

Excessively nested tables take longer to render, and cause accessibility problems. (Screen readers used by the blind would have a hard time correctly interpreting the layout.)

But that doesn't exactly respond to your original question. I feel that if you know CSS really well, use CSS -- but be sure to add the tabindex attribute to links to ensure motion-impaired people can tab through the page. (Because, with CSS, content doesn't have to be in the same order in the HTML code as it renders.) For the rest of us (that includes me), I feel that a few simple nested tables is a perfectly OK way of laying out a page.

-- David Gillaspey


1. Transparent GIFs: I'm not sure there is a place for them any more especially as we learn more about the accessability issues and deal with them.

2. Speed: Has anyone documented this scientifically (I'm not looking for atomic clock precision, but knowing the results would be nice).

3. TabIndex: How do you deal with the TabIndex issue when using Server Side Includes? (Which I am not doing on this page, but I am considering in the future). I do have the idea that you could number the include ridiculously high or low and then number correspondingly in the content to get a correct order (but with weird numbers).

[crowsfan85]

1. I agree. Transparent Gifs are dead. One of CSS's best features is it's ability to position elements using margin and padding.

2. Regarding speed, I'm sure it's been documented. A quick google search could probably pull up some examples of how much faster CSS is. I believe Eric Meyers has something on it, at least he does in one of his books.

Consider that once the CSS, the formatting has been downloaded, it is cached on the client's machine and doesn't have to be downloaded again, unless the CSS changes. This is a huge savings. Plus the syntax for html formatting tags is redundant. There's no need to use <font ...> again and again. One simple CSS definition can do the trick.

Specifically in regards to transparent gifs, though they're tiny in size, they still require a request and response from the server.

3. I'm not sure what you mean regarding tabindexing. Most pages don't need to use tabindexing. My understanding is that tabindexing is only needed when you the order of form fields or text links on a page don't match the order they appear in the html, so you use them to make sure when the user presses tab it goes to the expected element.

[David Gillaspey]

Jack wrote:

<< 3. TabIndex: How do you deal with the TabIndex issue when using Server Side Includes? [[ snip ]] >>

Look for my solution to this question here:

http://www.greatchurchwebsites.org/accessibility_motion.php

(toward the end of my discussion about using the tabindex attribute).

But I agree, also, with Nick: it shouldn't be necessary, in most cases, to worry about whether tabbing works or not. Tabbing is part of the normal browser GUI.

(But Nick, my friend, have you tested the tabbing on your home page? In I.E. on Windows XP, on my machine at least, I can only access the links in the middle column and top left [under the banner], via tabbing. I cannot access the main navigational links under the banner by tabbing, nor any links in the righthand column, nor any links across the bottom.

Things are better in Firefox on Windows XP: I can access all links on the home page by tabbing EXCEPT the main navigational links under the banner. Fortunately those are duplicated at the bottom of the page.

In both I.E. and Firefox, when I move the mouse over the main navigational links under the banner, the submenus appear, as they should. In order for those links to be accessible to motion-impaired people, however, they need to be able to use the up or down arrow key to access them. This doesn't seem possible.)

Sincerely,

David Gillaspey
President
Great Church Websites

[JackWolfgang]

Jack wrote:

<< 3. TabIndex: How do you deal with the TabIndex issue when using Server Side Includes? [[ snip ]] >>

Look for my solution to this question here:

http://www.greatchurchwebsites.org/accessibility_motion.php

(toward the end of my discussion about using the tabindex attribute).

That's what I thought.....assign very high and very low numbers and put the content in between.

Thanks, David.

[David Gillaspey]

Right, but even that can be tricky.

On most of the pages of my site, I have an introduction followed by this: "David Gillaspey, president and founder, Great Church Websites (a not-for-profit corporation." This "signature" is an include file, and it's in the middle of the page content.

I say that because there's usually some content above the signature and lots of content (in the form of a table) below the signature.

Now the links across the top of my site and down the lefthand side have a tabindex of from 1 to about 30 or so. The email link in my signature has a tab index of 95. (Why 95? Because I want the first row of the table that follows to start with a nice round tabindex of 100.)

So that means if I have a lot of links in the introductory text above my signature, they must have a tabindex of between about 30 and 95. Sometimes that gets to be problematic.

Links in the table below my signature can have tab indices of from 100 to just under 32000. That's because my second email link, that's at the bottom of all pages (except the forum, now), and is also part of an include file, has a tab index of 32000.

By the way, links in the forum do not as yet have tab indices set, I'm sorry to say. I believe it is possible -- it will just be a while before I'm ready to alter the vBulletin code to ensure accessibility. (And also to re-install that spell checker you liked, Jack.)

Sincerely,

David Gillaspey
President
Great Church Websites

[cwgraves]

In my experience, CSS is faster than a bunch of nested html tables. However, the problem is that not CSS versus html, it is poor design! This is a similar argument to the old Visual Basic versus C++ for us programmers. Many developers claimed (myself included at times), that C++ was always faster than Visual basic. When Visual Basic first started becoming popular, everyone with a copy of Visual Studio called themselves a programmer. Therefore, there was a lot of BAD Visual basic programs out there!

In a similar light, there is a lot of BAD html code out there. I have found if I go back and hand tweak the html code, I can eliminate many of the nested tables. Or, if I evaluate the need for 99% graphics and 1% text on my site, many times I can redesign using styles and get rid of a lot of the graphics.

Once I started optimizing my sites, I found I didn't need CSS positioning. I still use CSS for styles, but almost never use absolute positioning.

CSS still isn't 100% compatible amongst the different flavors of web browsers. Until it is, I won't use it unless I can enforce a particular browser. In a company intranet, for example, I can declare, "Use IE 6.0 or higher only." For the general public, I can't say that or I automatically reduce the number of people willing or able to view my site(s).

[youthman]

I am wanting to learn how to design with CSS as opposed to tables. From what I can see, CSS is cleaner code (although I am not a coder) and is becoming more and more popular of a format for web design.

[GuruGreg]

I also read somewhere that CSS is much better handled by the "translators" which are used for the blind to go online. Things often get jumbled or lost among tables with them.