Tables Were Never Meant For Layout

quirks, tips and references

[tedster]

Back in ancient history, when the W3C was considering their HTML 3.0 recommendation, they decided not to include tables. But Netscape (the BIG boy back in those historical times) included tables in their browser anyway, and people loved it. So the W3C included tables in their HTML 3.2 recommendation.

The original idea was simply to allow data to be displayed in rows and columns -- a logical structure, and not intended for page layout purposes. But designers jumped on it and soon an overwhelming majority of sites were laid out with tables.

The key to using tables for layout is in appreciating that we are using a tool that was not designed for the job. There simply will be frustrations, especially cross-browser.

1) One frustration is the way Netscape, up to 4.7, deals with spaces, tabs, and line-breaks (hard returns) within the code itself. Sometimes, but not very predictably, the browser adds extra space to the table cell. If your HTML validates, and the page looks great in MSIE, but Netscape won't match up elements properly, try eliminating all the spaces and hard returns between </tr><tr> and </td><td>.

2) Another issue comes from bad code. TABLE, TR and TD tags should come in pairs and always nest logically. MSIE often can forgive bad code, but Netscape more often simply refuses to render anything in the offending table.

3) Then there's rendering speed. If a big page is enclosed in a single table (or intricate nested table system) the page may be slow to appear on screen, especially in Netscape. See the bottom reference link for another discussion here on WebmasterWorld about improving rendering speed when using tables for layout purposes.

4) Finally, using tables for layout is not recommended by the W3c. This practice can be very confounding to assistive technologies, such as speech-synthesized browsing. Anyone wanting to declare level "double A conformance" [w3.org] to the W3C Accessibility Standards -- stay away from layout tables and control the layout with CSS.

Any other table issues people have uncovered?

REFERENCES

W3C Spec For Tables In HTML 4.0
[w3.org...]

W3C - Tables And Accessibility
[w3.org...]

White Space Bug Discussion
[webmasterworld.com...]

White Space Bug Reference
[emf.net...]

Rendering Speed Discussion
[webmasterworld.com...]

[Brett_Tabke]

That is a good historical backdrop Tedster.

I use tables everywhere - a grand abuser of the scheme. They are getting old, but you just can't beat them for controlling layout.

One of the interesting tags in html4 is the tfoot, thead, and tbody tags. If you are using html4, they might be well worth a look because the added functionality.

What I would like to find, is a HTML validator, (other than cse) that can successfully find table problems.

[sugarkane]

Now this may be the product of a fevered imagination, but I'm *certain* that one version of Netscape I used ages ago showed table errors as flashing when you did a 'view source'

The only windows version of NS I've got to hand is Communicator 4.06, and it doesn't do it. Did I dream it?

[glauber]

Brett_Tabke said:
>What I would like to find,
>is a HTML validator, (other
>than cse) that can
>successfully find table
>problems.

Doesn't Tidy handle them?
[web3.w3.org...]

[Brett_Tabke]

I work with mostly dynamically generated stuff. The actual html I generate isn't where changes are needed - I need it in the source. So, 'tidying' up and html page, doesn't address or inform me of the problem.

[mivox]

I'm using 4.7, and I've seen flashing code for other errors, so you weren't dreaming. But then again, I've seen pages with 'invisible tables' that didn't show any flashing code, so I'm not sure quite how it works.

For complex tables, with many cells that have a column or row span of more than 1 (very prone to strange spacing errors), I make sure ALL cells have a height and width attribute specified, and I add a row of 1px cells across the top, and a column of 1px wide cells down one side... then in each 1px cell, I place a transparent gif that exactly matches the height/width of the row/column it belongs to.

Don't know why, but it seems to cure the syndrome of one cell or another displaying at a really randomly huge width or height.

[tedster]

mivox, that's the way that NetOjectsFusion used to handle writing cross-browser code, and it works rather well. I don't usually give the full treatment these days unless troubles are cropping up with more minimal coding.

The touchy part is declaring table width AND the cell widths. The table width amount must account for the total of individual cells PLUS cellspacing and cellpadding (which are 1 pixel by default) or anomalies will show up.

Here's a page [iglou.com] that really disects the cell width problems in tables. I found that one good study of the concepts here helped me a lot.

Edited by: tedster

[mivox]

I *never* use the 'extra row' technique unless there's a visible problem in a major browser... Too many extra lines of code cluttering up the page. I've really gotten away from doing coplex tables like that too, so I rarely have a call for it anymore.

As for the cell width/teble width settings: in GoLive, you can leave the table width setting on "auto", define all your cell widths, and then use a drop down selector to change the table width setting to "pixels". It automatically calculates the pixel value for the table...

"no math required" is always a bonus feature to me! ;)

[scott]

Now that I've got CSS going, I'll only use tables as a last resort. I just can't get over the layout control of CSS!

[theperlyking]

I too am a table junkie. Useful tips especially for people who havent yet had the pleasure of tearing their hair out and wailing over why netscape shows a corrupt page.
I worry about CSS as while it is a fine idea it tends not to work well cross browser/platform. I take some pride in seeing my sites work on platforms as diverse as the Amiga and QNX.

[lizzie]

I would like to find a way to turn a small table into a gif or jpeg file. I know it probably isn't possible...?

[scott]

lizzie, how about this? Open the table in your browser and do a screen shot. Then just crop it down to get rid of everything but the table.

-Scott

[lizzie]

That is one of the cleverist things I have ever heard of. You are brilliant!

[lizzie]

The table has 3 links in it.

[tedster]

Two ways to handle the links come to mind, if you are using the screenshot technique.

The first is use a client side image map -- but spiders don't usually follow image map links (not sure about googlebot -- it seems to eat almost everything these days).

Second, slice up the GIF and then link the relevant portions as a straight HTML link. A little more work, but the spiders will appreciate it.

[oilman]

>>The table has 3 links in it.

image map that sucker and you're off to the races

[lizzie]

OK step one worked like a charm--the screenshot.
Now I don't care if the search engines follow these links,
but will they not like my page if they see links they can't follow?
Also, how do I image map this sucker?

[tedster]

lizzie, here's a straightforward image map tutorial [htmlgoodies.earthweb.com].

[lizzie]

Thanks everyone. OK, no image map, I need all browsers
to see the links.

[mivox]

Slice the table gif into three pieces, and re-assemble it on the page inside a 0 margin 0 cell padding/spacing table. Then link each graphic slice to wherever it needs to go.

[tedster]

Sometimes, on a simple image slice, I can get away with just putting <br> tags between the pieces of the image (for horizontal slices) or abutting the image tags in one line with no spaces or hard returns in the HTML (if the slices are vertical).

This has the advantage of not pushing the links a level "down" into a nested table structure. Spiders seem to like content that isn't nested.

[lizzie]

Right Tedster. My purpose of all this is to show the
search engines three gifs at the top of my page instead of
all the html that makes the table. Then after the gifs they will see my optimized text. Am I making sense by doing this?
I do see pages in number one postion that have all the optimized text at the top of the page in a table to give the page a nice layout. In my case there is no optimized text in my table and that is what I want the search engines to see first. Right?

[tedster]

If you want to move text to the top of your HTML, you can use CSS and absolutely position a div which holds your sliced image. Then the code for the div can appear anywhere in the HTML.

NOTE:As we discussed in another thread [webmasterworld.com], this will wreak havoc with the Google cache display.

When it comes to optimization concerns for this graphic table, name your image slices well, use the alt text in each image, and name your link destination pages with your keyword strategy in mind -- all this helps.

<added>
I just re-read your post and see that I misunderstood what you were saying. So, only some of what I said really applies to your particular goals.
</added>

[lak12]

Graeat topic tedster!
Yeah, many designers (especially those who wrote FP) do not validate their tables for cross browser compatibility. I do use my simple validator in spider when someone submits the link URL to my site. I only check for closing </TABLE> tag as Netscape just won't show the table if it's not there.
I believe the first wide use with success tables were implemented by e-bay. They use tables as rows and therefore page looks formatted while it's loading one table at the time and you do not have to wait for the whole page to load to see the results.

Tables are the great tool, but new designers do not understand them completely and abuse the whole idea badly sometimes, unfortunately.
Cheers.
Mark.