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]

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]

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_or_CSS_Choosing_a_layout/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/2004/05/an_objective_look_at_table_based_vs_css_based_desi gn/

[Narasinha]

.. 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.


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]

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 (http://www.holidayphotos.org)

[Faglork]

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]

[...]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?



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

[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

Yes, and no. There are many instances where certain properties and attributes within CSS are interpreted differently by the browsers.

For example, IE may interpret a margin property one way and FF another. Or Opera might decide to screw something up. Or Safari might not like the layout at all, even if there isn't any issue with validation.

I'm not picking one browser over the other here; I'm merely pointing out that the problem with CSS is that it's still subject to a degree of interpretation that is minimzed with traditional HTML. Hence the phrase "bitch" (and I stand by it).

The hours spent cursing at something that works in one browser and not the other. The time spent learning all the different properties and how each browser handles them (valid doctype declaration or not, that is still gonna happen), the "why the hell doesn't this WORK?". All of this is a fat ol' pregnant dog.

Simple layouts tend not to cause these types of issues, but as people explore more complex layouts, these issues can, will, and do come up.

[Easywebdev]

Why use css? Because you can.
You can read and read and read on the subject and you will get thousands of opinions but for me it all boils down to this.

Know what you are doing.
In my opinion it is about as easily done as it is said. Jump straight in at the deep end, dont go for transitional, loose or strict doctypes but go for the latest standard, xhtml 1.1 pop over to w3c and do a little reading.

xhtml has very few tags, the main ones you will use are div, h, p and li with your ids and classes in your stylesheet thats all you really need to structure a document.

There are raging arguments on every webmaster forum about cross browser inconsistencies but really thats just a lack understanding in how the different browsers interpret code. The main one that gets a lot of people is the box model, you set a div to be 400 pixels wide with 5 pixels margins, ie will place the margin inside the 400 pixels, firefox and all standards compliant browsers will add the margin to the 400 pixels so webmasters rant and rave about it, the simplest thing to do that will make your code cross browser compliant is to use one div for specified widths and a second div inside the first that controls margins/padding. Box model solved with one extra tag.

Hand coding, I dont mean doing everything in a text editor (I do but its not to gain some sort of prestige it is just what I am used to. I can rattle out websites quicker than anyone with a wysiwyg editor because I know what I am doing, I know my editor and all its shortcut keys) Use whatever tool you are used to but you should be able to understand the code output. The argument rages but I personally see improved rankings in the search engines for valid code probably because 80% of a standards compliant site is content and 20% code, whereas with the likes of frontpage it can actually be the reverse.

With css and xhtml you can produce standards compliant websites in minutes. If you are doing it for a living then you will develop web "frames" of sites with dynamic drop down menus, popout menus, 2 colum, three column layouts etc and all you will have to do is add a few graphics and content.

It's all about reusability. Dont reinvent the wheel for each new site.

Take a look at www.csszengarden.com lots of different views, from corporate to retro to techno. 1 website, the same content and code but different stylesheets.

CSS, the power is at your fingertips.

[JuniorOnline]

you could find this article helpful:
http://www.sitepoint.com/article/tables-vs-css