Layout: CSS vs Tables

Jason_Batten

What do you think is better for the layout of a template?

CSS at first glance seems to have a lot going for it. I have been working with tables for 5 years and just started to attempt at working with CSS for layout. It is not the easiest thing to grasp in 24 hours :o I have found it frustrating to get things exactly where I want them to be. I have also been reading that there are a lot of bugs when working with CSS for layout. Naturally a webmaster wants their site to cater for all web browsers and as difficult as it already is with the lack of support for CSS it becomes even more difficult when you want to use CSS for layout. I have seen what can be done with CSS layout but getting to that destination seems hardly worth it...

Not when we have tables and that lovely little include tag 😃

When working with tables you can get exactly what you want with little frustration apart from the contant <table><tr><td> writing :bemused: but with the include tag you don't have to worry about writing (or copy and pasting 😉) the whole layout code again. I use to keep a layout.html file but now I don't need to with include.

The big battle is over ease of maintance and file size.

To me file size is not a huge biggy. I am on 56k and I always make sure my sites load fast for me. Basic is beautiful 😃. The future is broadband so does file size really matter now days? Whats another 2 kb :rolleyes:

Ease of maintance is what we all want. With a single CSS file you can change the whole look of your web site. That idea is gold but instead of the pain in updating you have the pain of getting your style to work in all browsers, correctly. Mainly you will update your site more times than build it so it does work in that favour. With tables you need to sort though a lot more shiasa and the more it gets with the more tables you use. But with the include tag you won't need to deal with tables. But again with changing the whole look of your site becomes more difficult than CSS, you'll need to change multiple files or totally code a new design.

Final questions
CSS is clearly an easier way to change the whole look of your web site but is it really worth the pain? The same thing can be done with tables and inlcude. Is it worth learning layout with CSS in the long run?

Weedpacket

Final Answers: Yes.

Anyone else smell troll?

pohopo

Yes it is worth using CSS. The purpose of CSS is not to replace tables as you can have tables in your site and use CSS. And (as the name implies) CSS cascades, so if a browser is not able to read the more complex CSS you can have it cascade to a simpler CSS style that the browser will recognize.

You can't judge CSS from 24 hours of using it. I am sure you were not a pro of HTML after 24 hours.

Jason_Batten

Pohopo I think you missed my point 🙂

I know CSS and use it. I am talking about the layout being scripted with CSS only using the DIV tag which replaces TABLES.

Weedpacket, it would be nice of you to post your opinions instead of disrespecting new people. We are new to PHP, that doesn't make us "stupid" it just makes us unaware. I have read a lot of articles and posts on layout with CSS. All old. I just wanted the latest information and latest opinions. If you can't offer me that please don't reply to my posts. I am sure you know a lot of information, please share it.

planetsim

NetNerd85 there are a tonne of CSS topics littered around here, also weedpacket did answer your question, just very briefly.

Final questions
CSS is clearly an easier way to change the whole look of your web site but is it really worth the pain? The same thing can be done with tables and inlcude. Is it worth learning layout with CSS in the long run?

Final Answers: Yes.

Also dont expect to always get straight answers, or even answers that remotely have anything to do with the topic at hand here, after this is the Echo Lounge anything can happen here (ok well almost anything).

Shrike

Ugh I can hear Weedpacket sharpening the knives already 😉

I don't really think there is much of a debate here. CSS with a <div> or CSS with a <table> is much the same, there are some fringe benefits which a <div> based layup has (flexibility) but this is usually at the cost of complexity. Also there is a possible Accessibility benefit for the <div> approach - but a table layup can be made to XHTML standard with WAI Level 3 Accessibility.

As for including files - I don't really see what that has to do with either.

Weedpacket

Originally posted by Shrike
Ugh I can hear Weedpacket sharpening the knives already 😉

I think you're right: who wants a nice thick slice of dead horse?

goldbug

/me bites his tongue.

davidjam

Originally posted by NetNerd85
Weedpacket, it would be nice of you to post your opinions instead of disrespecting new people...

weedpackets real good at that, and sometimes he'll even provide a lot of information that dazzles. He even made me want to delete all my posts once. (Actually I did). goldbug was so nice to me till I positively shuddered with forgiveness!

But generally mean people piss me off. Oh well. Character defect # 5047...

On topic: pohopo is right, you can use tables and css together. Tables aren't evil. I would say take css to limit before writing it off. It is the future of web presentation, so don't set yourself up for obselence by taking it too lightly.

/me spends too much time reading this forum...

BuzzLY

Originally posted by goldbug
/me bites his tongue.

:eek:

Wow. I am VERY impressed. Come on, goldbug, he asked for advice. Spill it 😃

BuzzLY

Originally posted by davidjam
... pohopo is right, you can use tables and css together. Tables aren't evil. I would say take css to limit before writing it off. It is the future of web presentation, so don't set yourself up for obselence by taking it too lightly.

/me spends too much time reading this forum...

Yes, tables and CSS can be used together, and SHOULD be used together, when the information being requested calls for it. For instance, if you own a site where people can compare features of the items they want to buy, a table is what you need. You should use tables for tabular data. Go figure.

However, what our esteemed guest is requesting is about the use of tables for layout of a page, and I say NO, do NOT ever use tables for layout. If you want an excellent example of using CSS for layout, check out the CSS Zen Garden.

And FYI NetNerd85... Weedpacket is a highly respected individual in these parts (until he takes off his pants). Be a part of the community, instead of alienating its most respected members.

goldbug

Originally posted by BuzzLY

Wow. I am VERY impressed. Come on, goldbug, he asked for advice. Spill it 😃 [/B]

I'm trying hard this year to just "let stuff go" 🙂

Given my complete lack of politeness and mild case of OCD, it's proving very difficult. (Throw in non-formally-diagnosed Asperger Syndrome, and I've got the hat trick!)

davidjam

does that mean that you compulsively eat asparagus, then get really mad and go on a purge diet, and then start all over again? boy you're really sick. :rolleyes:

LordShryku

Well, I've read the Windows vs Linux thread and now this one, and I guess I'll throw my two cents in.

First, take Weedpacket with a grain of salt. Eventually you'll have a question and he seems to be one of maybe three people in the world who will usually have the answer. He's very blunt, but also incredibly smart.

I'll stay out of the Windows vs Linux debate (taking a note from goldbug here and "letting it go"), but I'm going to keep a watch on it. Though, it should be pointed out that it's been debated many times here, it's always got people on both sides of the fence, and you'll usually never convince someone to go the other way.

Now on topic, keeping compliant would almost(maybe definitely?) require you to go to a div based layout. If you have no interest in being compliant, then you're really asking this question to the wrong group of people. Just looking through the echo lounge would show you that most of us like to stay in compliance with XHTML spec, and most of us use CSS div layout. Personally, I found the transition hard at first, as I'd imagine anyone would, but once you've done it, it'll become the norm that tables is to you now. I've got more flexibility in my sites to shape and mold the div tags than I did in the tables tags. But like Windows vs. Linux, it's a preference. Use what you want. But if one day your site looks strange on the new browsers, you have no room to complain :p

pohopo

Does www.csszengarden.com display correctly on most browsers?

Weedpacket

Originally posted by pohopo
Does www.csszengarden.com display correctly on most browsers?

www.csszengarden.com
Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.

Though there is a "special effects" section for sites that only look right in "Safari, Opera, and Mozilla-based browsers, such as Firebird, Chimera and Netscape 6+" (yes, I changed the tense and connectives of the quote) because they use parts of the spec that are not supported so much elsewhere.

Weedpacket

Originally posted by LordShryku
I've got more flexibility in my sites to shape and mold the div tags than I did in the tables tags.

CSS isn't tied to HTML or XHTML, either; if it's tied to anything it's XML, and most dialects of XML don't have table tags or anything with equivalent semantics, so you can't use tables to lay those out.

toolbar[mode="text"] > #window-controls > toolbarbutton > .toolbarbutton-text {
   display: none;
}