What real problems does using tables instead of divs present to the end user?

Question

Forgetting about things that pertain exclusively to the developer like code maintainability and religion wars about semantics and what-not, my question is: what real world problems does using tables present to the user? Are there device that cannot understand a tabled layout properly? Does it decrease the page's relevance on search engines?

Of course I'm talking about a reasonable layout where tables are only used for things that in pure CSS/divs require hacks (and for tabular data obviously) -- not things like a hundred nested tables maybe even used instead of ul/li.

Answer 1

Tables are such old technology that they are reliably rendered on every device and in every program I know.

I am not encouraging the use of tables for layout unless really, really necessary (which it is in a few cases), but I do not believe a well done layout using tables for some aspects does automatically affect rendering negatively. Feel free to prove me wrong, though.

There may be problems for text to speech programs when a table is used instead of the semantically correct element, e.g. in ordered/unordered lists. But I believe that any text to speech or other accessibility software has provisions for this, otherwise it would not be usable on today's Internet.

There may also be cases in which a browser that needs to intelligently resize a web page (e.g. a mobile browser) has more trouble with tables than with other layout elements. But that depends very much on the individual layout and situation.

Answer 2

User agents (aka browsers) for the visually-impaired may use spoken descriptions of a webpage.

When the layout is done by table, the description of the page contents becomes a description of the table, which is unlikely to help understanding.

Answer 3

Here's a nice presentation that sums up the problems with tables pretty well: http://www.hotdesign.com/seybold/06problems.html

Answer 4

The main end-user argument I have about it is future-proofing, and page size (which relates to load time, which relates to user experience). If you are designing a page semantically, and using the minimal markup approach, then page sizes w/o table-based layout are almost always smaller than pages that use a table-based layout.

That's more bits on the wire on every request for that page, which (as stated) means longer load times, etc. min-html + external CSS sheet, however, works out to markedly faster load times for most production sites (see Yahoo's YSLOW guidance) due to the fact that there's usually a one to many relationship between CSS sheets and pages, which means that you are taking advantage of browser's caching capabilities (and potentially other intermediate devices caching as well).

The future-proofing comment is related to design changes. It's much easier to effect wholesale visual layout redesign from CSS with a min-markup page than it is to do so in most common table-based designs. See csszengarden.com for examples.

Obviously, YMMV in both cases. If you're really making the minimal use of tables (e.g. one table on a page, one row in that table, three TDs in that row, one for each column), then you probably don't have to worry about those things. That said, ime, it's better to learn the CSS techniques, or pay someone who knows them. Designs quickly become more complex than you think they will up front many times, and using tables as a quick fix soon becomes a slippery slope. Again, all said IME; YMMV.