Div's versus Tables

[Ian Beer]

I am still a little bemused about this, although i am generally an infrasctructure guy. Whenever i need a layout i generally use tiles or more recently facelets. But for the actual HTML i have always used tables as they behave the same cross browser and dont crunch wrap and fold like div's emulating tables seem to do - well for me anyway .

So whats the fuss all about?? what are the tangible benefits or is this just another craze?? Someone please explain. Furthermore despite developing and using firefox - which div's behave on - IE *spit* still has 80% market share and the div's as tables dont behave so well on.

So why do we have to embark on another cross browser adventure! as developers we are writing two sets of javascripts and now we also have to write two sets of css as well!! I appreciate that browsers are from differing companies but from a developers perspective why would i burden my self with this extra work??

[Herman Schelti]

hi Big Ian,

Divs (and spans) give you more flexibility than tables
-you can change a vertical menu into a horizontal just by changing the stylesheet

Your html will look easier: less nesting of tags.

I'm not a purist though, I still use the "table"-tag for input-forms.

Herman
(I use Tiles too)

[Mark Spritzler]

This is a good question, and one that hasn't made sense to me either, how it is possible to create a complete layout without using any Tables. I obviously have seen it happen with CSS all the time, just the concept of how to do it is what gets me from being able to implement it myself.

Does the book cover how to do layouts with just CSS and no tables?

Thanks

Mark

[Bear Bibeault]

One advantage that using CSS for layout has over tables is that tables lock you into a specific layout, whereas <div>'s positioned with CSS allow you to change layout without changing markup. This is particularly important for views that will have multiple skins.

I can understand the reasoning behind avoiding the use of tables for purely layout purposes, which comes down to the patterns that separate visual rendition from document structure, in which the HTML markup contains only document structure information, and all visual rendition information is relagated to CSS. It's a worthy goal, but sometimes difficult to fully accomplish given the state of CSS support across browsers.

A corallary to this can be seen in the Unobtrusive JavaScript movement, which dictates not only removing visual rendition information from the document markup, but behavior as well.

What I've found interesting in some circles is the complete and somewhat unreasonable backlash against using tables even for tabular data. When the data is clearly a table structure, I don't see what the issue is with using tables for tabulare data as it accurately represents the document structure in such cases.
[ October 09, 2007: Message edited by: Bear Bibeault ]

[Dan Drillich]

A very interesting article about the subject - Tables Vs Divs.

Regards,
Dan

[Ian Beer]

Dan thanks for the link to the article that is useful and a fair explanation.

Still the browser issue remains though, developers still have to hack and contend with the corporate machines.

*Sigh* i must've been evil in a previous life

[Bear Bibeault]

Originally posted by Big Ian:
as developers we are writing two sets of javascripts

There is no reason to be doing so in this day and age. Cross-browsers libraries like jQuery handle all but the most-nuanced of browser dependencies.

and now we also have to write two sets of css as well

Patterns for handling this (which I can only assume are part of the promo book) are available that make this less painful. But yeah, until IE joins the ranks of real browsers, there's gonna be a little pain.

[Timothy Stone]

There is no question that this topic excites me as a SCJP web developer. Especially in this forum, a venerated one such as the "JR BMS".

If you want to know what DIVs vs TABLEs really means, a concrete example is always the best way to learn: using Firefox, turn off styles (View > Page Style > No Style), and surf the web. If the page remains ridgedly in form, it's TABLEs at work. If the page collapses to a still readable and functional form of pure, semantic HTML, conveying information like a good outline or book, that's CSS at work, likely on DIVs.

Try it at csszengarden.com for a real treat. To sweeten it further, and see just how different a real browser like Firefox works vs. IE, try viewing this CZG design in IE v. FF.

http://www.csszengarden.com/?cssfile=062/062.css

[Mike Bowers]

There is a significant semantic difference between tables and divs � they have different meanings.

When you use a table in your markup you communicate that the contents of each cell is related to the header cells in its row and column. This is analogous to a database table where all the columns in a row are uniquely identified by the primary key of the row and the name of each column identifies the meaning of that column.

This might not be a big deal for visual users when they can't see a table that is used for layout, but for non-visual users it is a big deal. Tables are more difficult for non-visual users to navigate. Screen readers announce the row and column header cells before they read the contents of a cell. This annoys non-visual users when row and column headers have no meaning because the table is used only for visual layout.

Lastly, divisions are more flexible than tables. A table's columns can't wrap around vertically when the browser window is narrower than the table's width. This typically isn't a problem for desktop computers, but users of small Internet devices, like PDAs and cell phones, have a hard time navigating a table because it is awkward to scroll horizontally on these devices.

Chapter 17 of my book, Pro CSS and HTML Design Patterns, shows how to create fluid layouts that can match any layout you create with tables. This design pattern is called Fluid Layout and it works reliably and predictably in all major browsers. You can see an example of fluid layouts in action at http://cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Layout%20Example/example.html . The whole page is designed using nothing but divisions. Because this example uses fluid layouts, it is fully accessible to non-visual readers and reflows nicely in devices with narrow displays like cell phones and PDAs. For example, when a display is narrow, the virtual "columns" in the fluid layout wrap around to become rows. This is really cool behavior that doesn't work when you use tables.

On the other hand, I like XHTML tables. They are very useful for displaying tabular data, and they have some advanced layout features that can't be mimicked by any other markup. I have devoted chapters 15 and 16 of my book to tables. In these chapters I expose some powerful layout features of tables that are not documented anywhere else. See http://cssdesignpatterns.com/Chapter%2015%20-%20TABLES/index.html and http://cssdesignpatterns.com/Chapter%2016%20-%20COLUMN%20LAYOUTS/index.html .