CSS DIV or HTML TABLE for my product info page

[Donn]

Good to be back!

I'm currently revising some templates that I had made for my product information pages.

I am working with ZC 1.3.8A....

My question is this:

I had a table and another table nested inside the first.

My layout was nothing complex, but I decided to re-do the page
layout utilizing CSS.

The tables worked. As I said, it was a simple layout. Nothing so special.

I only took them out because I've recently read a book on CSS stating that W3C recommends using tables only for tabular data, and using DiVs defined in a stylesheet for layout,. I wanted to take out EVERYTHING that was deprecated in HTML, and use CSS instead.

After finishing that task, I decided to remove the tables, and use CSS DiVs to create the (simple) layout. (A box within a box, really!) I know that tables are NOT deprecated, but DiVs are suggested for formatting a page instead.

I managed to get the CSS version working.

But then I found a few sites (many, actually) debating which is better. Many are old posts, but there are some current ones as well.

Is there any reason I should go with CSS DiVs or HTML Tables?

I've read some older browsers (and some current ones--forgot the names) don't understand DiVs. But if that's the case, won't they not work with Zen Cart ANYway, as DiVs are used?

Or, are DiVs used for styling, but not in place of tables, or both.

Any experienced web designers, please consider sharing your opinion and experiences.

I am at a crossroads; I know it was good getting rid of deprecated HTML styling tags, but.....did I go too far?!?!?

Take care & Be Well....

Donn

[gjh42]

HTML tables are bulletproof and people familiar with them may find it easier to achieve a given result with them, but for anybody using a screenreader, they can destroy the comprehensibility of a page. That is a reason not to use them for page layout (they actually help a screenreader understand an actual table).

There is one thing in particular that tables can do that divs cannot, which is make a series of elements assume the height of the tallest. This is why there is still one layout table in Zen Cart, to handle the center and side columns. (Divs can accomplish the task with a complex setup of floats, positions, etc., but this is easy to destroy by newbies trying to adjust it.)

Future browsers will support CSS tables, which will achieve the ease of table layout without gumming up the HTML content.

http://www.sitepoint.com/blogs/2008/...ext-big-thing/

[rstevenson]

Even this many years into it, there are still a few problems with tables. Too many levels of nested tables, especially if there is a form nested at the innermost level, can cause some rendering problems. The form will work fine, but some browsers (no points if you guessed IE) will render controls like buttons a little differently because the cascade (CSS) fails to penetrate. Also, table structures often require more class names on each element, and therefore redundant styles than is needed in a DIV structure.

It can be agued that something like product page layout is, in some senses, a tabular data structure, and is therefore a reasonable place to use a table.

In short, I wouldn't worry about leaving the current Zen Cart structure as is. It works fine. I understand that v2, whenever it's ready, will use more CSS and fewer tables to lay things out. (Quote from the ZC v2.0 announcement page: "the layout is now controlled by CSS, as is most of the template")

Rob