CSS vs Tables-based Website Layout Design

[xtknight]

Through experience I have always found tables a lot easier to use than div/span/etc tags with style properties. They seem to be a lot more compatible since they are "older", yet the webpage comes out looking just as good and you went through less trouble to get there. Most of my problems stem from one browser displaying it differently than the other, and it happens more with CSS STYLE properties more than anything else (like text-align, vertical-align, and inheritance of some properties).

Why are we moving to CSS-based layout? What are the advantages? Have I just had bad luck?

I would like to hear your thoughts on this, and your experiences.

 

[wheresmybacon]

I used to do site design back when everyone started going nuts with CSS and I'd like to know the answer to this question as well.

 

[xtknight]

I do understand that you can develop a site that has nearly all of its code in CSS form besides sheer content, but that sounds so far-fetched and out of reach for most casual web developers that it should only be considered in niche scenarios (like content management systems). My question is with regards to a rather simple website that only has one "skin" with little desire to change it later.

 

[sourceninja]

http://www.hotdesign.com/seybold/

In a nut shell, css uses less bandiwth, easier to maintain the site once it is developed, tends to allow search engines better results on your site, and is more accessible across multiple platforms (print, computer, disabled, cell phone, etc). It also allows users to do cool stuff to your site a lot easier such as mashups, greasemonkey scripts, etc. Not only that, but it is actually the right way to do web design. On top of that, it is a lot easier to use css to scale (which means your site looks right no matter what the resolution). I'm sick of all these sites deisgned for 1024x768, I use 1600x1200, so lets dynamically take advantage of that extra space.

I remember when I first started programing, I excused my ugly code as just doing it for fun. Eventually I realized their is no excuse for not writing like you are a professional.

 

[xtknight]

Originally posted by: sourceninja
http://www.hotdesign.com/seybold/

In a nut shell, css uses less bandiwth, easier to maintain the site once it is developed, tends to allow search engines better results on your site, and is more accessible across multiple platforms (print, computer, disabled, cell phone, etc). It also allows users to do cool stuff to your site a lot easier such as mashups, greasemonkey scripts, etc. Not only that, but it is actually the right way to do web design. On top of that, it is a lot easier to use css to scale (which means your site looks right no matter what the resolution). I'm sick of all these sites deisgned for 1024x768, I use 1600x1200, so lets dynamically take advantage of that extra space.

I remember when I first started programing, I excused my ugly code as just doing it for fun. Eventually I realized their is no excuse for not writing like you are a professional.

That was quite an impressive presentation. :Q Many thanks for the link, I really learned a lot. My opinion of them really did a 180.

Sure enough, there are lots of great reasons to use CSS. I never even thought of the page inconsistency thing, although come to think of it you can just use the same stylesheet for each page if you're good enough at CSS (regardless of if you want different themes or not). So I suppose it is high time I learn CSS, huh?

 

[txrandom]

Only thing bad about CSS is that browsers are very picky and don't conform to one standard. I just started CSS last week. Although it's a little confusing at first, it's much better than tables , <font>, <b> tags, etc. I just wish it wouldn't change everytime I pull up a browsers.

 

[GundamSonicZeroX]

Marked for later.

 

[UF Matt]

I've been writing simple HTML for 10 years now. I still use Notepad and always use tables to create my layouts. Having said that I use CSS to classify fonts (e.g. P class=whatevertext).

 

[Nocturnal]

CSS is much easier to work with and troubleshoot in the case you have problems. CSS is the present and the future. Tables were never meant to be used for layouts. CSS is.

 

[Nocturnal]

http://www.cssremix.com

Those sites are all made with CSS.

 

[yacoub]

When it is appropriate to use tables (inside of an HTML document styled with CSS):

[*]Presenting large data sets in rows and columns.
[*]Presenting content in lots of small cells that need fixed positioning related to each other.
[*]An email you want to be certain will render properly with every popular email client and webmail client - all (or darn near all) of which support table tags, but most of which strip various CSS selectors.

Feel free to add any I've missed.

 

[clamum]

Originally posted by: sourceninja
In a nut shell, css uses less bandiwth, easier to maintain the site once it is developed, tends to allow search engines better results on your site, and is more accessible across multiple platforms (print, computer, disabled, cell phone, etc). It also allows users to do cool stuff to your site a lot easier such as mashups, greasemonkey scripts, etc. Not only that, but it is actually the right way to do web design. On top of that, it is a lot easier to use css to scale (which means your site looks right no matter what the resolution). I'm sick of all these sites deisgned for 1024x768, I use 1600x1200, so lets dynamically take advantage of that extra space.

Pretty much what I've read on the topic.

To me it just makes sense as far as attempting to separate structure from presentation and what the future is headed to. Using CSS is cleaner and more efficient. And can be frustrating (hint: people who write browsers, how about cooperating and sticking to W3C recommendations?).

 

[Jaxidian]

Originally posted by: clamum

Originally posted by: sourceninja
In a nut shell, css uses less bandiwth, easier to maintain the site once it is developed, tends to allow search engines better results on your site, and is more accessible across multiple platforms (print, computer, disabled, cell phone, etc). It also allows users to do cool stuff to your site a lot easier such as mashups, greasemonkey scripts, etc. Not only that, but it is actually the right way to do web design. On top of that, it is a lot easier to use css to scale (which means your site looks right no matter what the resolution). I'm sick of all these sites deisgned for 1024x768, I use 1600x1200, so lets dynamically take advantage of that extra space.

Pretty much what I've read on the topic.

To me it just makes sense as far as attempting to separate structure from presentation and what the future is headed to. Using CSS is cleaner and more efficient. And can be frustrating (hint: people who write browsers, how about cooperating and sticking to W3C recommendations?).

I agree with all of the above, pretty much. However, final decision comes down to a per-project decision. Does the client want cheap and functional or expensive, functional, and theme-able (that a word?)? If they want cheap, then I'm not going CSS if they need it to be cross-browser compatible - it just takes way too much time to put in the hacks/workarounds/testing to get it to work cross-browser. Tables are just much more predictable among all browsers. I agree, CSS is the "technically better" way to do it but business needs (i.e. cost) often means table really are the better business decision.

-Jax

 

[Abhoth]

My take is this .... CSS makes things so way easy. Although, if you have "tabular" data, use tables ... within a CSS construct of course.
But ... if you do tables well and it's not a huge site then by all means, do tables! But you have to do them right! ;-)

 

[sourceninja]

To make css cross compatable the easy way, check out http://www.code-sucks.com/ and other resources on the net, most of the time you can find a layout similar to what you are looking for, saves you a lot of work.