I still don't get why layout tables are evil!!

[mistafeesh]

I've been building websites since 2000, so I guess old habits die hard! I've also had a couple of years out, sort of, as I've been very ill and unable to keep my finger on the pulse properly. But as my health has improved, I'm getting back into the swing of things and taking work on again.

I've always used CSS as much as possible, although not much for layout.

Now I'm trying to do things according to current wisdom, and it seems to me that a combination of tables and css layout works, but when I try to use just CSS things overlap nastily, overflow wierdly, and all sorts.

I've even read most of the book "designing without tables" from sitepoint, but I still don't get why using tables for layout occasionally with non-content elements such as logo's and navigation bits, etc is such a Very Bad Thing...

Anyone care to enlighten me?

[Tezcatlipoca]

Just punching a simple set of keywords into Google will give you near countless pages and examples of why tables should not be used for layout, but some of the more common, as I understand it, are:

1. Tables are usually more bytes of markup
2. Tables are usually slower to layout for the browser.
3. Tables usually prevent incremental rendering.
4. Tables may require you to chop single, logical images into multiple ones.
5. Tables break text copying on some browsers.
6. Tables prevent certain layouts from working within them (like height:100% for child elements of <td>).
7. Once you know CSS, table-based layouts usually take more time to implement.
8. Tables are semantically incorrect markup for layout.
9. Tables make life hell for those using screen readers.
10. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.

[WebJoel]

This is always one of my favorites sites:
http://www.hotdesign.com/seybold/index.html

[felgall]

The biggest problem with doing tables for layout the right way (in the CSS) is that IE7 and earlier don't support those CSS commands.

[mistafeesh]

I totally agree with everything you, and that site, say, but sometimes tables just seem the best way to do stuff. For example, boxes with rounded corners are dead easy with a table, and an absolute nightmare with css.
On my website (http://www.oxdance.co.uk) I couldn't get the navigation to sit in the right place exactly in IE unless I put it in a table. Also, a table seemed the best way to slot several images together - in this case an animated gif surrounded by jpgs to make a floating TV with static.


Having said that it's borked in IE8 (but nothing else) so I'm going to have to look at it again.

PS just saw felgall's post. Yep, that is a huge part of it...

[Jeff Mott]

It takes time to become accustomed to laying out pages with CSS. Things seem confusing only because they're different. But once you get the hang of it, you'll find it's a good different.

The CSS Zen Garden (seen here (http://www.csszengarden.com/?cssfile=100/100.css), here (http://www.csszengarden.com/?cssfile=202/202.css), here (http://www.csszengarden.com/?cssfile=136/136.css), and more (http://www.mezzoblue.com/zengarden/alldesigns/)) helped me quite a lot in progressing to CSS only designs. Sometimes it's more useful to be able to inspect and imitate a working example rather than just reading about it in a book.

[bluestartech]

css only design is also much more readable to search engines compared to tables when done properly..personally i still use tables a lot as its quicker to code and easier to manage with current development tools

[WebJoel]

And in defense of TABLEs, if the content involves tabular data (like objects or ideas columnized over a heading that describes the content, like FRUIT describes "cherries, apples, pears, etc" and VEGETABLES describes "squash, corn, beets, etc") then yes, TABLE-layout for that, is permitted and encouraged. That is what 'spreadsheets' would do and they DO use TABLEs.
User-agents for the handicapped would 'read' the 'header column' and the 'data' correctly identified as being a child of that generalized heading.

And, to be real, alot of 'legacy' pages on the internet still use TABLEs (including this forum) :o .

[mistafeesh]

I'm getting there, even since posting this in frustration. I guess it is a combination of learning new ways of doing stuff, being frustrated at ie not interpreting css properly (still) and the occasional layout table not being the end of the world.

The thing I mostly find myself still using tables for is when I want specific elements of the content tightly wrapped together, such as boxes with curved corners or snazzy looking navigation. I know nested divs are supposed to be better, but in my experience they're more faff and look worse than tables.

[mistafeesh]

I'm working on a new site, and rather than starting a new thread I thought I'd post here as it's relevant!

I just want to center something and put it at a specific height. If I was using table based layout, the cell height above it would ensure that it was at the right height and I could center it within the cell easily using a nested table. As it is, I'm having to arse around with margins and stuff.

[NogDog]

You may find it useful to "zero out" all margins and paddings so that you are not messed up by the different default values used by various browsers:

stylesheet:

* {
margin: 0;
padding: 0;
line-height: 1em;
}

You now know that all margins/paddings are starting at zero, and you can adjust them as needed to suit your design. Then when you "arse around with margins and stuff" you'll at least know where you are starting from.

[mistafeesh]

cool. I'm getting the hang of it.

Love the sig, by the way.