... heya all - just joined the list for interest's sake and am slowly making my way through some of the posted CSS-savvy sites. Somewhere along the way someone decided tables and in particular nested tables are a bad thing (tm) - I am curious as to the reasoning/history behind this, and the penalties I will receive when I release the new website design for my website :)
The penalties include:
- code bloat
- higher bandwidth costs
- longer download times
- longer rendering times (some browsers need to read the whole table before rendering)
- confusing use of incorrect tags for the purpose
- confusing redesigns ("how many TDs are there again?", "where the **** am I?", etc)
- incompatibility with non-visual user agents
- incompatibility with other devices (which may not even exist yet)
The thing is, tables aren't bad at all. Tables are very useful for displaying tabular data, and can/should still be used for such things. What *is* bad is using tables to layout page grids, rendering content which is not tabular, like a 2 or 3 column page layout. By using tables in such a way, you're mixing presentational mark-up with your content mark-up.
DIVs and SPANs were invented to wrap around logical blocks of content. CSS was invented to style this content (presentation). This makes a whole heap more sense than a whole bunch tables, right?
<div id='header'>...</div>
<div id='content'>
<div id='main'>...</div>
<div id='sub'>...</div>
</div>
<div id='footer'>...</div>Then a style sheet will position and present that information any way you like (within reason). If you decide one week to have the sub colum on the left, then switch it to the right a week later (or even page by page), it's really easy with stylesheets, and better still, a quick edit of one stylesheet rule can update 100's or 1000's of individual pages.
It's a beautiful thing.
The rewards include:
- less mark-up and code bloat
- separation of content and presentation (to a certain degree)
- smaller page sizes (since a single 25k style sheet can style 1000's of pages, all of which are leaner by around 50%)
- lower bandwidth costs
- faster rendering times
- semantic use of tags as intended (a P is a paragraph, a Hx is a heading, a div defines a logical block of content, etc.
- simple, fast, global redesigns from one file
- graceful degradation to older browsers (@import can hide style sheets from NN4 and IE4, so they just get plain stylings, and IE conditional comments can target misbehaving IE versions)
- forwards compatibility with any standards-compliant user agent (in theory, if you validate)
- you're using HTML as it was intended (for structure and mark-up of a document, not rendering)
- you're using CSS as it was intended (for presentation of a well-structured HTML)
- you're ready for whatever the future brings (as long as it's based on the standards)
- less presentational elements and superfluous tables in the mark-up mean that it will require less skill to edit and maintain the content
I could go on.
There is of course some downsides (mainly along the line of frustration and the steep learning curve), but they're well worth it IMHO.
The history is simple. We used to force tables, stretchy GIFs, 's and inline presentation elements (like <font face='...' size=''>...</font> to do things that HTML couldn't do. Now it can, and most browsers are pretty sorted out, so jump on board and get with the program :)
But to answer your question, TABLEs aren't bad -- incorrect use of them is bad :)
--- Justin French http://indent.com.au
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
