Why Switch from Table to CSS layout?

[discarnateEntity]

Thanks, Paul. Your answer makes perfect sense, and for me, finally closes this topic.

[Stevie D]

I seldom see a need for creating a whole site using display:table but rather for the odd element(s) that need a special table behaviour. The rest of the time floats and other methods are usually more suitable.

In particular, given how patchy and buggy browser support for the various display:table properties is, while it might sometimes be a simple solution to a difficult problem according to the specs, in reality it can take so much fixing that it isn't necessarily any quicker or easier than using other layout techniques. I've never yet found a need for it!

[Paul O'B]

In particular, given how patchy and buggy browser support for the various display:table properties is, while it might sometimes be a simple solution to a difficult problem according to the specs, in reality it can take so much fixing that it isn't necessarily any quicker or easier than using other layout techniques. I've never yet found a need for it!

Yes my reply was specific to the question posed which stated :

Other than incompatibility with old versions of IE,

Therefore I did not address the issue of ie7 and under compatibility.

The display:table and associated properties work fine in IE8 and other modern browsers (although there is the odd bug) and if older browser support is required then as you say it's probably not worth the effort unless you build in some sort of graceful degradation.

(I am actually using the display:table properties extensively at the moment on a clients new vbulletin4 forum (css only) site that needs vertical alignment and equal columns for all the posts/threads etc. Ie6 and 7 just get floated columns and no equalising or vertical alignment. It seems to work well but I happen to think though that forums are really tabular data so I'm not really keen on the tableless vb4 system as it does actually make things harder.)

[Mittineague]

.....
we're "anti anything that isn't being used for the purpose it was designed".
.....

I'm trying to think of others.

It still irks me when I want <b> or <i> and the validator squawks. If I wanted <strong> or <em> I would use it.

Other than sorting through the official documentation, know of a list?

Or are these the main culprits?

Edit
I just remembered
Mis-use of expected <h> sequence

[discarnateEntity]

It still irks me when I want <b> or <i> and the validator squawks. If I wanted <strong> or <em> I would use it.

Following Paul O'B's philosophy, you should use CSS (applied to a generic element like a span, if necessary) to create bold or italicized text if you are doing it for purely stylistic purposes rather than to express emphasis, right?

...
we're "anti anything that isn't being used for the purpose it was designed"
...

I'm tempted to make some comment about the internet having been designed for the purpose of giving researchers greater access to supercomputers, but the point was well taken.

[Paul O'B]

Other than sorting through the official documentation, know of a list?

Or are these the main culprits?

Edit
I just remembered
Mis-use of expected <h> sequence

I don't have a list but the biggest misuse of an element I see in the forums is using the break tag just to make space. That really annoys me.

Regarding "b" or "i" then they have their place which is why they are not deprecated. There are still arguments as to what is the right usage and whether they have slight or no semantic value. I tend to think that if they are used for decoration without adding extra meaning then that's their purpose. Making an element bold just for a visual effect would be the right use of the b element. (Of course html5 makes this somewhat of a moving target but that's another issue).

[discarnateEntity]

Wouldn't it be best to avoid using the <b> and <i> tags altogether? I thought they were considered good candidates for deprecation since they go against the principle of separating content from presentation.

[noonnope]

Maybe, in a better UA future. I totally agree with <b> going, but used as sand bag or in some other way as a hook for style may prove to be the concession you need until those better days arrive.

Just the other day I was trying to come up with a solution for styling a menu, and the use of spans alone was not producing the expected result. But, by replacing some of the empty spans with bs solved the problem I had and, as a plus, saved my ass from further complicate both the markup and the css.

[zerpex]

I’m really struggling with whether to learn and use CSS for layout. I’ve been a designer for over 20 years and been using tables for layout for 13 years. Most of the sites I create are for small businesses averaging around 10 - 60 pages. (10-20 is most common.) I really like using CSS for formatting text, lists, positioning, etc. In my opinion, combining table layout with CSS works great. I’ve read the debates online. I’m not questioning the benefits of CSS in general. I use it and love it. What I’m trying to figure out is the benefits in using CSS for LAYOUT. Here are my questions which I'm hoping you can help…

CSS Layout Advantages:

1) Easier Site-Wide Changes – CSS proponents claim site-wide changes are easier with CSS because you change one file and boom, it changes on all pages. I use Dreamweaver template files. I make a change to the template file and boom, it changes on all pages. What’s the difference?

2) Faster Load Times Because of Lighter Code – I remember load times being a major issue when I first got started but it doesn’t seem to be the case anymore with so few people on dialup. I can’t tell any discernable speed difference between a table layout and a CSS layout’s load time. (Yes, I like clean code too.) Heavy image use and Flash still seem to be the biggest factors in speed. If the human eye can’t tell any difference, then what’s the point? And server space/bandwidth doesn’t seem to be an issue anymore either. Space on the server for all of my client’s sites is generally 1/16 of capacity.

3) SEO – From what I can tell, search engines aren’t indexing or ranking CSS layouts higher than table layouts. The algorithms used for ranking most often are content and inbound links. The spiders are highly efficient at discerning code from content. So what difference does it make?

4) Separation of Style and Content – I guess this one is related #1, ease of updating? This is what Dreamweaver template files do. It separates style from content (editable/un-editable). I don’t know about you, but generally speaking what my clients want most often is to update the content. I don’t understand why it would be easier to update content using CSS more so than tables. (Remember, I DO use CSS for formatting.) If they want to tweak something in the design, again, piece of cake to do. Just change the template file. It’s not hard.

5) Greater Consistency – If you use template files and CSS, where is there inconsistency?

Disadvantages to using CSS for layout

1) Inconsistent Browser Support - Different browsers will render CSS layout differently as a result of browser bugs or lack of support for various CSS features. This is no small drawback!! It’s huge. I fought this very same battle using tables back in the 90s. Different browsers rendered the design differently. I really resented (and it sounds like many of you do too) all the time I had to spend to get a site to look as it was intended for ALL users. I REALLY don’t have any desire to fight that battle again. I know there are workarounds. But again, if I don’t see the overwhelming benefits, I won’t don my armor or sharpen my weapons.

My questions and concerns are genuine and not an effort to get CSS lovers to defend themselves. If you are designing using CSS for layout, cool! You are a part of an ever growing majority. Personally, if I could instantly convert a design into HTML, I’d do it. I have no great love for code. Right or wrong, I LOVE spending most of my time designing. For me, the rest is a necessary evil to get the design into the medium. So if you feel strong emotions regarding CSS layout, don’t respond. If you get where I’m coming from, please help me understand using logic.

Jennifer

Okay, first of all, if you're using tables instead of div etc, the site will load different - A table works, that it's loading the whole table before loading other stuff at the bottom - About SEO, you make better SEO with using divs, because google crawlers look at clean code - And a table isn't "clean" - Maybe it ain't a big difference on small sites. The world today is using mobile-devices more than ever.. Tables + Mobile devices = bad.. The layout isn't great in many cases - Personally I use div because it's lighter code, easier to style (I'm a big CSS nerd) - and just more "scalable" I think.

But you can use tables or div/css for layout - web 2.0 is based on div - and normally only use table for "data", and still I would go for a orderedlist or unordered list - But loading time, and SEO and "cleaner" code with CSS and divs. I can recommend it. But ain't forcing.

[noonnope]

Okay, first of all, if you're using tables instead of div etc, the site will load different - A table works, that it's loading the whole table before loading other stuff at the bottom

True, only if you don't know how to code a table element the right way.

- About SEO, you make better SEO with using divs, because google crawlers look at clean code -

I could give you a number of sites for which the above is just not true.

and "cleaner" code with CSS and divs.

Again, that's only if you can code the right way using divs. A table layout can prove to be better then the crap some CMSs produce.




Bottom line: you should avoid tables because using divs gives more options. And it's semantically friendly. Loading time, SEO, clean code has little to do with it. You can be competitive using tables also. Some big guns companies say so

[JenniferBigBlue]

Well, you're now preaching to the converted.

I have really enjoyed learning CSS. Its like a huge logic problem and when you solve it, it's like ahhhhhhhhhh.

But like anything new, with time, you start to see it's weaknesses. Tables still rock in regards to stacking images side-by-side or creating multiple columns within columns. And as someone who's on the internet everyday I find it a bit irritating waiting for the entire page to load before I can do anything particularly if it's heavy. That didn't seem to be the case with tables.

I'm not a purist. I will use whatever tool does the job best and in some situations tables WITHIN CSS are the smart move.

[awasson]

True, only if you don't know how to code a table element the right way.

I'm in agreement with most of what you've said with exception of loading html tables. Anything inside a table is invisible until the entire table has loaded. That is a behavior of the browser not something that coding will change.

[noonnope]

You can prove me wrong, of course, but there is a thing called incremental display: http://www.w3.org/TR/html401/appendi...l#notes-tables, http://www.w3.org/TR/html401/struct/tables.html.

Authors may also group columns to provide additional structural information that may be exploited by user agents. Furthermore, authors may declare column properties at the start of a table definition (via the COLGROUP and COL elements) in a way that enables user agents to render the table incrementally rather than having to wait for all the table data to arrive before rendering.

[awasson]

You can prove me wrong, of course, but there is a thing called incremental display: http://www.w3.org/TR/html401/appendi...l#notes-tables, http://www.w3.org/TR/html401/struct/tables.html.

Yes, I see what your suggesting but it's been my experience that even when you follow the instructions HERE to define fixed widths (or fixed table with percentage columns) that the table doesn't necessarily display its contents incrementally and in no way does it compare to the speed that an intelligently structured <div></div> page will. Perhaps you've had better experiences when comparing the differences.