News:

Want to advertise on our front page for FREE? Just go to this thread for details.

Tables vs CSS

Started by Terrence Marks, April 23, 2010, 05:35:32 AM

Previous topic - Next topic

Terrence Marks

I've noticed, in the site reviews, a preference for positioning via CSS instead of tables.

As someone with a mostly-table-based site (who doesn't want to reconfigure everything unless he has to)

what are the advantages of using CSS?

ran

With CSS, you define a bunch of classes. I'll try to explain it in a way you'll easily understand.

You know when you put tags around a sentence to make it bold, like this? <b>werdz</b>

Well, with CSS, you basically make up your own tags, but instead of bolding your text, you can do anything with it--you can change your font, text colour, put it in a box with a specific background and position it wherever you want on the page, align it, make it a rollover image, pretty much anything you can dream of, but without making a lot of changes to your hard code. You just need to remember the tag, and either put your css in your header, or link to an external file in your header. It's also really easy to make changes to without messing everything up.

Terrence Marks

Yes.  I know what CSS is.

Is there a functional advantage to using CSS for layout and positioning instead of tables? 

Not "ease of use".  I've got the page built.  The easy thing is to leave it as is. 

In what circumstances will a CSS-based layout give the readers a better experience than a table-based layout?

Dragon Powered

Basically, you can use CSS styles with your tables to do many of the same things division tags can do, and you can use divisions within your tables.  There is nothing wrong with mixing and matching.

Functionally, a pure CSS site will scale better for alternative devices, such as smartphones, that are used to view your webpage.  A pure CSS site will display in an easily readable format on text-only browsers as well, since the items will display more like a bullet list, whereas a table driven site kind of becomes a mess on text readers.

It really depends on what your site is delivering, and what audience you are aiming for. Tables have been a standard for a long time, and will display pretty much evenly across browsers. CSS is a new standard, and should display pretty much the same across all browsers except Internet Explorer, which for some reason STILL believes it should dictate what the web looks like.  You might need to use 'hacks' to get your site to display properly on different versions of IE.  Also, if your site is something like a forum, with multiple repeating sections in a page, tables seem to flow easier.  Aligning items on a page works great in CSS, but can get tricky when aligning the same item again, but in another spot on the page, and again, and again. Floats can crash, rollover attributes don't work uniformly, etc.


mishi

Really, you should only use tables for text. Never for your basic layout. CSS has been the new standard for quite some time. It may seem like a big pain to learn a new way of coding, but it's actually a lot easier than messing around with tables once you get the hang of it. You have more control over styling in general, and the ability to make your site look a lot more professional. As dragon said there a few issues from browser to browser, but they are usually ie related and fixable after a little trial and error. I really recommend switching over to div and ditching the tables :3
~ ミシーひめ

Terrence Marks

Thank you very much for all your help and advice.

I believe I'll leave things as they are for now; the last few attempts to convert to all-CSS have failed (particularly the cast page - http://yousayitfirst.com/cast/ - tables seem to handle the structure [two columns of variable size, with occasional bits in the middle] a lot more gracefully).

operationremie

i'm going to "hijack" this thread since I am trying to use CSS for my site instead of HTML since I feel css will be a much better option for me.

i get the whole defining everything with CSS but i think my issue is that I don't really know how to put things where i want them. i honestly would love to have someone help me on AIM or something to discuss it. i actually think i still have a jpg of how i want my site to look lol

if this is possible, i'd love the help

Rob

I hope you get some help Remie. Unfortunately I know diddly about CSS. Keep trying though. There are some good "CSS for Dummies" books available that are pretty cheap if you get desperate.


Dr. BlkKnight

Quote from: operationremie on July 12, 2010, 08:12:57 AM
I am trying to use CSS for my site instead of HTML since I feel css will be a much better option for me.

That's kind of an impossibility.

CSS enhances HTML, not replace it.

operationremie

Quote from: Dr. BlkKnight on July 12, 2010, 07:21:40 PM
Quote from: operationremie on July 12, 2010, 08:12:57 AM
I am trying to use CSS for my site instead of HTML since I feel css will be a much better option for me.

That's kind of an impossibility.

CSS enhances HTML, not replace it.

haha see, that's why i know nothing! i used HTML 3.0 for dummies to make my last site. i'm just an accountant, not a designer :P

Alectric

http://w3schools.com/

This site should really help you.  Organized, simple, and interactive tutorials in all aspects of web development with plenty of further references.  I recommend you take the HTML tutorial, and the follow it with the CSS tutorial.

operationremie

Quote from: Alectric on July 13, 2010, 08:24:54 PM
http://w3schools.com/

This site should really help you.  Organized, simple, and interactive tutorials in all aspects of web development with plenty of further references.  I recommend you take the HTML tutorial, and the follow it with the CSS tutorial.

thanks. i've been reading their stuff since i started trying to do my site and they have been helpful. i think it's just minor questions that i have.

Dr. BlkKnight

Yeah, w3schools is like THE place to start out, but you will eventually get to a point where they can't support your needs properly. Then it's old-fashioned Googling.