Why CSS instead of Tables

[bbbuffalo]

What is the advantage of using CSS instead of Tables, and what problems will I face by using tables in my site?

[richkoi]

I have been told that it is because css uses less coding so the code to content ratio is lower and that effects page ranking.

Has a WYSIWYG css editor been invented yet? If not, why not? The code is simple enough, someone at Macromedia needs to get on it!

Rich

p.s. Tables are also not exact a lot of the time. With css you can place everything exactly where you want it on a page. I just wish I new how to code, I'd be using it all the time if I did.

[bbbuffalo]

Originally Posted by richkoi

Has a WYSIWYG css editor been invented yet? If not, why not? The code is simple enough, someone at Macromedia needs to get on it!

It looks like there may be a CSS WYSIWYG. I went searching and quickly found http://xstandard.com/
I don't know anything about it yet though.

[richkoi]

I tried that program out and it still uses table tags.

Rich

[Webnauts]

Originally Posted by bbbuffalo

What is the advantage of using CSS instead of Tables, and what problems will I face by using tables in my site?

Here are some answers to your question:
http://www.raisemyrank.com/services/css.htm
http://www.davespicks.com/essays/notables.html
http://www.hotdesign.com/seybold/index.html
http://www.evolt.org/article/Tables_...yout/25/21429/

[johngroup]

Style Master has a preview window. Once you set your divs, you can code away and view. Not a wysiwyg, but works well.

[Corey Bryant]

Tables were meant to display tabular data and not to display / arrange HTML.

Using (external) style sheets will dramatically decrease your load time, help you make massive changes very quickly. Once you get the hang of using CSS, you will never go back. And I was one of those that never thought he would ever use / learn CSS and just stick to gool ole HTML

[Nox]

.. to decide, at least for me. I am faced with doing business in a small town with low economic growth and clients that don't care about anything but getting a great website at the lowest cost possible.

I have a client I am working with now who wants a site that looks like his competition (which probably cost several thousand dollars) but of course he doesn't want to spend more than a few hundred. I face this with most of my clients and I can understand it, they have budgets .. have to survive too but for me, I cannot afford to design an xhtml/css site, hack it for IE, create all the graphics from scratch and make sure it looks as slick as his competition for so little.

All I can do is explain the benefits of a xhtml/css valid and accessible site and why it cost more and hope they go for it. If they don't, then another table based design goes on my portfolio. I don't want to make this choice and frankly I haven't given up yet but I can't waste my time either. Time is money.

Edit: Here is a great article that discusses these issues:

http://www.andybudd.com/archives/200..._based_design/

[Narasinha]

Originally Posted by Nox

.. to decide, at least for me. I am faced with doing business in a small town with low economic growth and clients that don't care about anything but getting a great website at the lowest cost possible.

I can sympathize with the problems this comes with. It's tough getting the right ideas through to some clients. You really have to sell the idea that having a site that meets standards means that it will require less maintenance in the future when new browser versions are released, that having an accessible site will mean he won't be closing his virtual door to clients that can't see well or can't use a mouse and keyboard well, and that being "up to code" is legally necessary for his brick-and-mortar business and at least a good premise for his online business.

Originally Posted by Nox

I cannot afford to design an xhtml/css site, hack it for IE, create all the graphics from scratch and make sure it looks as slick as his competition for so little.

"Hacking" a site to look right in IE isn't necessary in most cases, unless your target is IE 5 rather than IE 6 (or 7 one of these days). IE6 still has a lot of issues with regard to accepting standard HTML/XHTML and CSS, but it is much better than previous versions. Personally, I browse with Opera most of the time.

As far as making his site "look" like an existing competitor, I've always found that it helps to steal only the best code. *grin*

Start with a copy of a page from the site he likes, then edit the heck out of the code so that it meets standards. If it's like most sites, it probably isn't up to current specs.

http://www.alistapart.com/ has some really good articles on designing with CSS, accessibility issues, etc.

Best of luck,
Narasinha

[ADAM Web Design]

Originally Posted by richkoi

Has a WYSIWYG css editor been invented yet? If not, why not? The code is simple enough, someone at Macromedia needs to get on it!

No they don't. Between Dr*amw*av*r and the bastardization of Allaire HomeSite (greatest text-based web editor ever, IMHO), the last thing we need is for them to get their grubby little hands into this and create the same disgusting WYSIWYG code Dr*amw*av*r is famous for.

On second thought, that might be fun too. I'd get a pretty good laugh at the dog's breakfast of code the "Macromedia Certified Developers" would pull out. Okay, I'm for this after all. Let's see what sick twisted monstrosities result from this.

The biggest advantage to CSS/XHTML that I've found is search engine optimization. If you have the right kind of layout and the knowledge to do so, you can arrange your code so that the content is loaded first (which is what the SEs are looking for), as opposed to a menu row, followed by maybe a submenu column, and then your content.

As Corey Bryant also pointed out, by putting your various styles for fonts and layout into one CSS folder, maintenance is much easier, since you're working from 1 file instead of 100. Just make sure that you keep inline styles to a minimum, so that editing is less of a hassle.

Be warned though: learning XHTML is a bitch. You will struggle with it. You will fight with it. You will curse the existence of the various browsers. But if you stick it out, you will learn.

To flatten your learning curve a bit, I'll provide you with this piece of advice: wireframe the layout first, and then fill it in. In other words, figure out where your various sections are to be positioned, and code until you've got them the way you want them. Then fill in each of those sections after. That way, when you have a layout issue, you'll have the section of code causing it relatively isolated.

[Nox]

While I personally love xhtml and css and am very excited about continuing to learn to design this way now and in the future, the bottom line is that these are all just tools and just like anyone doing any job, we have to choose the best combination for that particular job.

I will continue to try to sell my clients on the benefits but if they simply don't care or more likely, just don't have the money to spend, I will do the job ask of me to do with those most appropriate tools and yes that will mean I will still use tables at times.

On the upside, I can still use tables (NOT nested *grin*) with css and all the other tools at my disposal.

Narasinha: Boy it's been years since I have stolen code but I do look at a lot of it and now that I have learned xhtml and css all my new projects I write my own code and no longer rely on WYSIWIG.

I also agree that most IE hacks can be avoided by taking another approach. Besides it leaves a bad taste in my mouth *wink*

[hphoto]

It is not difficult to learn CSS/HTML and to hand-write all your code, instead of using WYSIWYG editor and it's all worth it.
One of the benefits of using CSS is SAVING BANDWIDTH.

Look for example:
Example 1 - HTML code with table:

<table <table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="180" valign="top" align="center"> column 1 </td>
<td width="620" valign="top" align="center"> column 2</td>
</tr>
</table>


Example 2 - HTML code with css

<div class="n1"> column 1</div>
<div class="n2"> column 2</div>

and you define all the classes' properties in .css file
.n1 {float:left; text-align:center; width:180px;}
.n2 {float:left; text-align:center; width:620px;}


As you can clearly see, in example 2 (the CSS code) you need less characters in your HTML code.
When you are dealing with big websites(many web pages) or busy websites (lots of traffic), then "less characters" will transform in lighter web pages and a lot of bandwidth saved.


-----------------------
Holiday Photos

[Faglork]

Originally Posted by ADAM Web Design

Be warned though: learning XHTML is a bitch. You will struggle with it. You will fight with it. You will curse the existence of the various browsers.

Why?

After all, it is plain old HTML except
- a few deprecated tags
- the necessity to close ALL tags
- the necessity to use lowercase on tags and attribute names

Those two pages just about sum it up:
http://www.w3schools.com/xhtml/xhtml_html.asp
http://www.w3schools.com/xhtml/xhtml_syntax.asp

IMO this is rather simple?

<snicker>Of course, seen from a MS frontpage background, this is science fiction ...</snicker>


Most browser incompatibilities origin in not chosing the correct DTD, with unpredictable results in cross-browser rendering. If you code for XHTML STRICT, you minimize cross-browser issues since all of them get switched to standards mode (using the correct strict DTD). So all you have to worry about is IE5, and there are some well-known hacks around.

Note: if you want/have to use the LOOSE variant, use a DTD which likewise throws ALL browsers into quirks mode, see
http://hsivonen.iki.fi/doctype/



faglork

[Corey Bryant]

Hey Adam - sorry just been really busy.

Just two more cents on this. And I used to use tables - and lots of them. Using CSS to do the layout and help you - is just fantastic. When IE starts to fully support CSS 2. and maybe even when CSS 3 gets published - people will change their minds.

Sure, laying out a website can be tedious for some, but when I had gone in, put up about 200 pages of a new site and my business partner said that he wanted the left said to have the "main content" - I only had to change one page, the CSS page. This just shifted everything over and I had nothing to worry about.

When you maintain a website with about 1,000 pages and realize that you have to go thru every page to change it / fix it - this makes you realize that taking advantage fully of CSS is the way to go

[Faglork]

Originally Posted by Corey Bryant

[...]When IE starts to fully support CSS 2. and maybe even when CSS 3 gets published - people will change their minds.

Ever tried Dean Edwards' IE7 script?

Originally Posted by Corey Bryant

Sure, laying out a website can be tedious for some, but when I had gone in, put up about 200 pages of a new site and my business partner said that he wanted the left said to have the "main content" - I only had to change one page, the CSS page. This just shifted everything over and I had nothing to worry about.

Ha. I once demonstrated this to a customer. Just loaded up one tiny css file and the whole redesign was done - for the whole site, in seconds. Quite impressive.

faglork

[Steve W]

Not sure why Adam is concerned about learning XHTML, you don't have to use XHTML with CSS, good old HTML is perfectly acceptable and will validate fine!

And faglork is dead right - use the STRICT doctype for the browsers to follow CSS rendering rules as best they can.

[Webnauts]

Read here about XHTML instead of HTML: http://www.w3.org/MarkUp/2004/xhtml-faq#need

[JuniorOnline]

why CSS? simpley because we had a very heavy LHS menu based on using tables and we were showing no where in Google. Once we got rid of that and changed it to CSS, it was like Magic!!!
we are showing and whats more, we are showing in the first 2 pages of search.

so really, all these comments are true, css is great and it does what it says it does.

Good luck
T