Why should I use css with no tables ?

[dbeezzz]

Hi guys,

I'm in a bit of a design pickle at the moment. I have a bunch of templates designed with tables and a bunch of styles which are all non-table css.

Something is going to have to give. It would be easier to convert the css styles to fit the template tables methinks !

What are the truly compelling reasons for the extra effort I'd have to put into the css design and validation as opposed to just sticking the finished product into a bunch of tables ?

 

[Foamcow]

CSS can be used for simply styling fonts etc or it can be used to control the layout of your page.

If you use CSS to control the style AND layout then it means that your HTML can truly reflect the structure of the document.
Headings can be marked up as headings, paragraphs of text can be marked up with <p> tags. Obvious. But also, navigation menus can be marked up as unordered lists (<ul>) of links. Quotes can use <blockquote>.

This makes for better accessibility, as each bit of content is marked up with a tag that describes what it IS. It can also allow more logical ordering of content.

The crux of it is that content should be marked up with tags that describe the type of content it is rather than using HTML to control it's visual appearance. This, in turn allows the content of the document to be delivered to virtually ANY device without losing it's meaning.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[ChrisHunt]

There's a good summary here: Why tables for layout is stupid

You might also want to look at

http://www.456bereastreet.com/lab/developing_with_web_standards/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[dbeezzz]

Thanks guys,

Even though I must say I'm still a bit dubious. I really don't see how it's more efficient and cheaper to design with css. A cross-browser, cross-platform, xhtml validated css sheet takes over ten times as long to create as a simple table structure. And yes, it can add consistency ... but by tying decoration with structure - every page on your site would have to be the same structure and decoration in order for it to be consistent. If you want to have pages of different structure then you'll have to design a different stylesheet for each of them and then test it.

I'm not too sure about the BW efficency here either. I mean what exactly are the relative BW gains between downloading a few table tags and downloading a linked css sheet ? Especially considering many sites now have flash or other BW intensive features.

The accessibilty thing is another bit I don't get. How many people use mobile phones or other devices to access your page ? If it's around 1%, then that's about 1/4 of the people who visit your page with javascript non-enabled browsers. I don't hear anyone going around shouting 'thou shall not use javascript'.

Don't get me wrong here, it seems like a cool thing to do if you have the time to sit down and craft a page and then test if afterward. But when your building an app that will fling out between 120-200 pages. Then the structure element of css seems to me to be a bit of a waste of time. Until browsers are standardised at the very least. And even then, there would still be advantages to seperating your pages along these lines

php => content
html => structure
css => decoration

I may be wrong here of course ... ?

 

[dbeezzz]

Oh ya, I nearly forgot to ask my question.

What exactly are the differences between putting some of my javascript on the page as opposed to linking to it ?
Am I really saving much BW or is it just window dressing ? I mean it still has to be downloaded anyway right ? Same goes with css ... it still has to be downloaded whether it's in a seperate file or not ?

 

[feherke]

Hi

I mean it still has to be downloaded anyway right ?

Yes, but not always. If is a separate file, then it could be cached by the browser or a proxy.

Note, that with XHTML you can not put the code in a comment tag to avoid showing it as content if the browser can not interpret the code :

<script type="text/javascript">
<!--
document.writeln('This should not be executed in XHTML documents.');
// -->
</script>

The main advantage is that you edit it once then use it in more then one document.

Feherke.

http://rootshell.be/~feherke/

 

[manarth]

Don't get me wrong here, it seems like a cool thing to do if you have the time to sit down and craft a page and then test if afterward. But when your building an app that will fling out between 120-200 pages. Then the structure element of css seems to me to be a bit of a waste of time.

It's not about 'cool' or otherwise - it's a proven effective method, especially for sites with a large number of pages.

Using CSS allows you to maintain consistency throughout the site, and simplifies maintainability by managing presentation in a single source, rather than distributed across hundreds of pages.

BW savings improve the more pages you have. Each page represents a saving on table tags and the like, but the css (which is usually cached) doesn't increase per page.

Likewise for JavaScript - linked as a seperate file, it becomes easier to manage (treated as a seperate library) and saves bandwidth.

The accessibilty thing is another bit I don't get. How many people use mobile phones or other devices to access your page ?

Accessibility is more than mobile browsers: it usually refers to enabling people with disabilities (such as visual or motor disabilities) to use a site with their alternative access devices (such as screen readers, and keyboard control instead of mouse control). As well as the social responsibility an accessible site shows, it's a legal requirement in some countries (such as the UK, where it's enshrined in the Disability Discrimination Act (and SENDA: Special Educational Needs and Disability Act, for educational establishments), and the US Section 508).

I don't hear anyone going around shouting 'thou shall not use javascript'.

Listen up - I say it all the time!
I've nothing against JavaScript - I use it on a number of my sites. But I always use it in such a way that it degrades gracefully: users with JavaScript disabled can still use my sites effectively.
An example is forms: I use JavaScript to highlight the label that matches the input that has the focus. It improves usability, but it doesn't break the form if the user doesn't have JavaScript.
The opposite example is JavaScript generated menus - how can someone navigate the site if the menu doesn't appear? (And how can a search engine index the site if the links are generated by JavaScript? Hint: Google spiders do not execute JavaScript).

A cross-browser, cross-platform, xhtml validated css sheet takes over ten times as long to create as a simple table structure.

Learning a new process takes time - the more you use it, the quicker it becomes. And yes, it does become quicker than tabled design.

And yes, it can add consistency ... but by tying decoration with structure - every page on your site would have to be the same structure and decoration in order for it to be consistent.

But every page would have to have the same structure for it to be consistent - if the page had a different structure, then that page is by it's nature inconsistent with the rest of the site. Many changes (such as inclusion of different types/sizes of adverts or sidebars) can be simply accommodated - but if a page is so wildly different from the rest of the site, it probably belongs on another site.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

 

[ca8msm]

OK, here's my take on it:

A cross-browser, cross-platform, xhtml validated css sheet takes over ten times as long to create as a simple table structure

That may be true in some situations but not all. Personally, I find it quite easy to develop simple XHTML and CSS pages (I'm not brilliant but I've definately got the basics covered) and now I have this, I think I could develop a page in the same time if I used CSS as if I used tables. If you haven't much experience in CSS (but you have in designing pages that use tables for layout) then yes it will take you much longer. That isn't a reason to use tables though.

If you want to have pages of different structure then you'll have to design a different stylesheet for each of them and then test it.

True, but you would also have to do this if you used tables. If you use CSS and have 3 different layouts for your site, you can simply apply whichever stylesheet is needed on the relevant pages and they will all have their display changed. If you had all your pages designed using tables for the layout, you would have to pick through each page that you wanted to change and apply the relevant tables structure (which would take so much longer than changing the link to use a different stylesheet!).

I'm not too sure about the BW efficency here either. I mean what exactly are the relative BW gains between downloading a few table tags and downloading a linked css sheet ?

There's maybe not much of a gain but anything that has a speed increase on your site for not much work has to be a good thing, right? By placing both javascript and css in seperate files, the user's browser only has to download it once as every subsequent hit to this page (or any other pages that require this file) can simply use the cached file.

The accessibilty thing is another bit I don't get. How many people use mobile phones or other devices to access your page ?

Around 10% of users on the internet browse without JavaScript functionality. This may be because their browser doesn't support it (i.e. some old browsers, mobiles, pda's etc) or they simply don't have it enabled (whether that is their choice or not may also be a factor).

Don't get me wrong here, it seems like a cool thing to do if you have the time to sit down and craft a page and then test if afterward. But when your building an app that will fling out between 120-200 pages. Then the structure element of css seems to me to be a bit of a waste of time.

On the contrary; this is the perfect situation to use it. If you had 200 pages that all used the same style/layout then you would only have to design one css file for the basic structure. If that structure needs to be changed, you only have to edit one file. Imagine, the same situation if you had used tables to design the layout and then someone comes along and wants a total overhaul of the layout (i.e. navagation moved to here, banners moved over there etc). You would have to go through a page, modify the tables so that the layout looked right and then, do the same for all 200 pages!

Personally, I know which I would prefer...


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Foamcow]

but by tying decoration with structure

That would be tables then. By using CSS you can completely seperate "decoration" from "structure". That't the point.

If by "structure" you mean "layout" then there is no reason why you can't have multiple layout CSS files and seperate "decoration" CSS.

Additionally, an externally linked file may be cached by the browser which means for each page refresh the user is only downloading the actual content and not all the table tags.
You'd be suprised how much this can save.

Take a look at this demo template page I made for someone:

http://www.foamcow.com/images/work/bpe/consumer/

It's not the greatest example but it shows the principle.

I haven't got a table version, but look at the source and see just how stripped down that is.
Even though the initial download of the CSS file may mean the first load is a little larger (actually it wasn't) future loads will be fast.
See how simple and structural the HTML is (I'm not saying it's perfect, but you should see what I mean).

HTML should be used to denote meaning to the content and not for controlling what it looks like.

The accessibilty thing is another bit I don't get. How many people use mobile phones or other devices to access your page ?

How about Google/Yahoo/MSN? Yes, they can read tables and index content on table layout pages. But without all the "extra" bulk that a table layout gives your page it is more likely that the actual content is going to get indexed. Each SE crawler has it's limits as to how much data it's going to crawl on a page, why not make that data worthwhile rather than have them crawl a load of table tags?

Additionally, accessibility is a legal requirement for many sites.

And yes, people do say "don't use javascript" actually. But it's normally in the context of "don't use javascript for core information or functionality. If you must use it then provide an alternative for non javascript users".

HTML - Document meaning (also known as semantic markup)
PHP - Server side processing
CSS - Presentation
Javascript - Browser behavior where appropriate

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[LFI]

Check out

http://www.csszengarden.com/

for how you can update the CSS of a page for a whole new look. Imagine you wanted to re-do the look/feel of your site. All you need to do is update your CSS! Some incredible examples here!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[dbeezzz]

Right, I guess there are some good points there.

The thing is though, if you are spitting out various pages on a website dynamically. Say for example a homepage layout, then a scrapbook layout, then a picturebook layout, then a place where you can click on a movie. You'd need to make a different stylesheet for each one of them.

Then each different website style would require it's own css style too. So basically you'd have a huge amount of css files. None of which could be cached. Each of which would be subject to the various whims and quirks of different platforms and browsers. When you take away the caching side of it, then you aren't left with many other benefits as far as I can see.

Sure every site should have consistency ... the colors, link hover effects etc... But it's hardly going to have exact same positioning for every page is it ?

I mean css might be perfect if you are using a site with the exact same layout for every page. Otherwise though you could find yourself in an absolute mess when IE brings out another browser which 'improves' it's css parsing.

As for google et al. I think if you look around you might see that most pages do just fine in the web ranking without css positioning. For example

http://www.seo.com

uses tables. You may even find yourself penalised for excessive keyword density depending on the circumstances and copy.

Giving your webpage a whole new look is something that's pretty easy to accomplish with tables as well. I really like css for decoration once you are using php. Plus that functionality is disabled in IE right ?

Maybe I'm just not as used to working with css as many of you are. I used to use it a lot for a while two years ago, so I'm familiar with it's basic setup. I used to use it to position my nav bars on the top of the site, while putting the code at the bottom. It was just a simple seo trick. Difficult to perform cross-browser and platform though (but then I'm not an expert by any means).

If you can create a durable page with css decoration and positioning as quick as you can create one with table positioning then great. But you'd still have to test on various platforms right ? I noticed that the webstyle guide recommends that you use tables not css for positioning. Also I noticed a couple of the

http://www.oswd.org

designers cursing IE and it's various quirks. I'd imagine that they are fairly savvy.

Being the one least experienced with this stuff, I guess I can't really argue with you all. But it kinda seems like a bit of an 'emperor has no clothes' scenario. From my standpoint at least. I guess once I get used to it I'll be fine. Sorry if I'm missing some your points here.

Speaking of which, do you have any good resources for a crash course on cross-browser quirks and solutions with css ?

 

[LFI]

I tell you what, I've seen a lot of people try to convince a lot of other people on this site that CSS is the way to go and I've seen a lot of resistance. I do believe that if you design pages for long enough, you're going to find yourself saying, with greater frequency, "there's got to be a better way!" When you've heard yourself ask that about 10 times, think to yourself "Oh! This must be what those people on Tek-Tips were talking about!"

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[ca8msm]

Speaking of which, do you have any good resources for a crash course on cross-browser quirks and solutions with css ?

Just as a quick note as I don't have much time, try looking at

http://www.csszengarden.com

as it really shows off the true power of CSS. Spend a good amount of time reading the site, look at the source that it uses and have a look at the different CSS style sheets that people use.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[frozenpeas]

dbeezzz,

The tables vs. CSS-P debate is nothing new. I won't bother adding anything to try to convince you why CSS is better than tables. It sounds like you are reading the replies with much resistance. One point you seem to be pushing is that using using CSS causes extra work because you have to develop and test for different layouts, as if a tables approach avoids that. I'm not sure why are you trying to make that argument.

I decided to abandon tables a couple of years ago and have never looked back. Don't be intimidated by the learning curve or the browser quirks. The payoff is worth it and those things will only improve with time.

Here are some resources for you:

http://www.positioniseverything.net/

http://www.alistapart.com/

http://centricle.com/ref/css/filters/

http://www.realworldstyle.com/

http://tantek.com/log/2005/11.html

http://www.tek-tips.com/threadminder.cfm?pid=215

frozenpeas
--
Micfo.com Affiliate Program

 

[dbeezzz]

Ok thanks guys, I'm sure that you're all right in this regard. I'll take your advice to heart and try to get with the program. I guess you can't be afraid to learn something new in this business.

It's not that I thought css was a bad idea. I was just wondering for all the effort involved, would it be worth it over the short - medium term.

Anyway I'll give it a try over the next week or so and report back here. I've got some other stuff to do in the meantime.

Cheers

 

[Foamcow]

The apparent intial effort will pay off in spades.

One thing, be sure to do it right. Leave the table mentality behind, think in terms of what the content actually <i>is</i> in order to mark it up logically. That's probably the hardest bit to do.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[feherke]

Hi

After so many pro CSS answers I would like only to add this as a word of warning :

Our browsers suck. Just thought I'd mention that. If it was only a question of learning CSS and applying it, there'd be no reason to panic. But years of lousy standards support by the browser companies has made CSS a study in heartbreak. Most of your time will be spent trying to solve browser trouble.

http://www.thenoodleincident.com/tutorials/css/index.html

Feherke.

http://rootshell.be/~feherke/

 

[Foamcow]

It's true that there are certainly pitfalls. But experience pays off and I, for one, have found that over time I tend to have fewer and fewer problems.

And if you get really stuck, then there is always Tek-Tips

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[ChrisHunt]

Though note, feherke, at the bottom of the page you quoted

© 2002 | Last modified 18 Feb 03

Browsers have got better since then: We have Firefox now, fewer people are using IE 5.x, and nobody uses NS4 (unless they're true masochists). Buggy and/or inconsistent CSS support in browsers is still a problem, but it's not the show-stopper that it once was.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd