DIVs vs TABLEs - The Age Old Question

[Remulon]

Hi,

This question is for anyone who has ever had any input on the age old question about whether divs or tables are better for layout and/or tabular data.

CSS purists say divs. Others say divs for layout, tables for tabular data (including me most of the time). What do you say?

Enough of the philosophy, here is my question:

I have a page with a table (with tabular data in it), each row has an onclick event on an 'expand' button. This makes an AJAX request and returns the extra data to be displayed in the row.

The main problem is, IE has the tr element's innerHTML property as read-only, so to be cross-browser compatible I can't update the entire row in one request. Apparently I need one request for each cell in the row which is to be updated. Which if you ask me is poor programming. Thanks Gatesy.

So if I had the table built entirely of divs and css, I could SNAP! update an entire "row" in one AJAX request.

So in this case it seems to me that using a table for tabular data just isn't suitable.

So how do I make a table purely out of divs and css? Not only that, how to I make it act like a table? Eg: elastic column sizing etc?

Anyone have any input on this? Or a possible solution for me?

Thanks

R.

[MidiMagic]

The real problem is getting the page to render correctly after you make a change, in either system.

Changing one table cell should cause the entire row to resize. But some browsers do not change the space allocated for rendering on a dynamic basis very well. And note that the tr tag does not take many styles. Most table styles work more reliably if applied to either the table tag, or the td and th tags.

On the other hand, any structure made with div falls apart at the slightest provocation, including changing the size of an element. The div tag too often ignores a style if it can't be rendered when the style is enforced. Table often does this too, but not so grievously.

Part of the problem is that web programmers are trying to do things that were not thought of at the time these structures and instructions were created. The original idea was to replace contents, but not change sizes.

Tables are not deprecated. There is no conflict between tables and CSS. In fact, CSS has many features intended to make tables easier to use. So CSS does not replace the table.

The problem the W3C wanted to get rid of was the use of tables to position objects on the page. Before CSS, there was no other way to do it. Tables were used to create margins, borders, and padding, because there was nothing else provided to supply them. Tables were also used to position images among text. I used to use them for margins, but at the time, it seemed like a kludge. It was.

Now there are a few uses tables should be used for, and a few uses div should be used for. The answer to your question is: Use what works:

Tables are better suited for the following:
- Tabular data
- Form structure
- Columns where the locations or sizes of the parts need to stay the same
- A matrix grid of pictures
- Any place where a div structure refuses to stay together

Divs are better suited for the following:
- Dividing the page into sections
- Creating margins, borders, and padding around content
- Columns, if they can be allowed to change in a fluid manner as sizes, content, and the browser change

Other structures are better used for some other things.

Note that div and table should NOT be used together in the same structure. Strange things happen when this is tried, and different browsers behave differently.