CSS vs Tables

[Spider]

Yes, I know - we have had this conversation before, but I have a question--

I have recently started creating a new website. It's not expected to be complicated, interactive, Web 2.0, 3.0 whatever. I said I would start to learn CSS. I heeded all your admonitions that CSS is somehow "better" than tables. However, it doesn't seem to be so easy to learn. Not saying I can't learn it but it seems it will take longer than I really want. At this point, CSS seems far more complex than I need. Tables are easy to deal with. I am well enough versed in them to be able to get them to do all that I want done.

Question 1 - Why should I bother learning CSS when tables will do all I want my design to do? Who cares (except you guys!) how the site is constructed if the finished product looks the same?

Question 2 -- Last time around, all I was able to discern was that "CSS is better than Tables." I never did discover how better - or why better. Is this a case of "Ford is better than Chevy"? Or "apples are better than oranges"? Or are there some serious reasons why one should code in CSS rather than tables, other than your own personal preferences?

[Harold Mansfield]

Yes, I know - we have had this conversation before, but I have a question--

I have recently started creating a new website. It's not expected to be complicated, interactive, Web 2.0, 3.0 whatever. I said I would start to learn CSS. I heeded all your admonitions that CSS is somehow "better" than tables. However, it doesn't seem to be so easy to learn. Not saying I can't learn it but it seems it will take longer than I really want. At this point, CSS seems far more complex than I need. Tables are easy to deal with. I am well enough versed in them to be able to get them to do all that I want done.

Question 1 - Why should I bother learning CSS when tables will do all I want my design to do? Who cares (except you guys!) how the site is constructed if the finished product looks the same?

Question 2 -- Last time around, all I was able to discern was that "CSS is better than Tables." I never did discover how better - or why better. Is this a case of "Ford is better than Chevy"? Or "apples are better than oranges"? Or are there some serious reasons why one should code in CSS rather than tables, other than your own personal preferences?

Check this article out:
Top 10 Reasons Why CSS is Better than HTML Tables - SEO Tools and Company - Zimbio

[cbscreative]

One primary advantage of CSS is manageability. Let's say you a two column site and the left is navigation/sidebar. Now suppose the site is 25 pages just as an example. Along comes the need to change the width of the sidebar for some reason. In tables, you would have to change all 25 pages individually. If CSS is done correctly, you cange it in one location and update your entire site. The same is true of any kind of formatting.

On your issue of learning curve, do you have Dreamweaver? I don't think the older versions have this as I recall, but at least back to CS3 there are some templates that use CSS and have been tested for standards and browser compatibility. These are not fancy, very skeleton with no color (which makes them very useful), but the structure is all pre-built.

If you don't have DW, download a free trial from Adobe and give it a test drive.

[vangogh]

As long as the site is the same to the visitor they won't care. However the site won't be the same. CSS done right will load faster, be more search friendly, be easier to maintain, give you more control over how the site looks, be able to be viewed on a mobile device, etc.

The only reason I ever hear for why someone should use tables is that they think css is hard to learn. That's not a good reason. It's like saying medicine is too hard to learn so we'll cure you with bloodletting and leeches.

To understand why css is better you're going to have to learn css. Once you learn it and build some websites with it, it's much easier to understand why it's the better option. It's easy for me to say a css driven site will be easier to maintain, but you have to maintain one to really see that. It's easy to say that css will be more search friendly, but you have to see the results from search engines to see that.

The only reason tables are easier for you to deal with is because it's what you already know. I guarantee I can build your site faster with css than you'll build it with tables. It's not that tables are easier, it's just that you happen to know them better.

Should you build the site in tables? It's really up to you. Is anyone going to know? Other than people like me, no they likely won't. They will notice your site taking an extra second to display and search engines will probably have a more difficult time picking out your content inside the code. People will gain a better experience from the site if it's coded in css as opposed to tables.

[thx4yrtym]

Two things that might help .

For $25 you can subscribe to total access to all the lessons you want and learn as much as you want rather quickly at CSS training, tutorials, online classes & how-to's .

Second have a look here: css Zen Garden: The Beauty in CSS Design

view some of the various designs that others have created and realize that each and every one of these site contain exactly the same html. The only difference is the CSS and images. If nothing else it will help you realize how css separates your content from it's presentation .

Hang in there it will sink in eventually.

[bacterozoid]

1. Don't pay for CSS learning resources. There are great free options like W3Schools. I would just take an hour or two sometime and sit down and begin to use CSS. You'll find it's incredibly easy to understand. Once you learn the basics, it's just a matter of learning the attribute names like "background-color", "font-size", "width", etc...and those are super easy to find with a quick Google search.

2. Comparing CSS and HTML tables is incorrect (like apples and oranges). I could create a table-based website that used CSS and it would work just fine. The proper comparison is Tables and Divs. Div-based layouts operate basically by placing blocks of content on your page. You get the same effect, but it's easier (after you've done it for a while), and much less complicated. You can also build a greater range of layouts.

3. Use CSS. It's just the right way to build your website. The previous comments are all correct. When you use CSS, all your styles are stored in one place. That way you can easily edit your website's look and feel and your styles don't have to load every time.

[billbenson]

Also, we are assuming that you are talking about css for layout vs tables for layout. Tables were designed for tabular data and are just fine for that.

Why not buy an inexpensive css based template and just use that? Find one that has a layout that you like, so you don't have to mess with the div tags yet. You can get familiar with the css changing colors, fonts, etc. When you get more comfortable with it, you can do things like changing header size or location etc.

When you are working with css, make sure you keep a backup of the last version so you can revert back to it in the event of an error.

Another option is to use wordpress. Find a theme you like, it could be a page format theme instead of a blog format theme. From within the admin panel of wordpress, you can edit the css (I'm pretty sure). This would make it easy, because you don't have to keep ftp ing stuff to your site to see what the changes look like.

Just my 2 cents

[vangogh]

The proper comparison is Tables and Divs.

Good point. A table based layout can certainly use CSS. This really comes down to how you develop your site layout. Tables impose a rigidity on your structure that divs don't. For a simple one row, one cell table it's not going to be a big deal, but as you add more complexity to your design, tables need to have other tables nested inside of each other.

That nesting can make it very difficult to look at the code and see what's going on. If you look at a small block of the code and see a few table cells it can be difficult to tell where in the overall design that table sits. It also makes it difficult to add or remove something since the table layout needs everyone of those cells to hold it together.

With divs that's usually not the case. You can add something new and while you would still need to style it so it fits within your design it won't break things that same way adding a table cell might. Same for removing a div.

[bacterozoid]

That nesting can make it very difficult to look at the code and see what's going on.

That itself is probably one of the best reasons to not use tables for layouts. I used to use them because I didn't understand how to use DIVs and I would always end up nesting like 5 tables to achieve the effects I want. This became a nightmare for me. I would spend an hour looking for a missing tag that was throwing my whole structure off.

Once I switched, I found it really wasn't hard at all. There's a couple basic properties about divs to understand...once you got those down, it all makes perfect sense.

[vangogh]

Table nesting become unwieldy soooo fast. Divs can take a little while to understand. You have to use them a little to see how best to group your code inside them and how to best style them in your layout. It's not hard though. It took me about a week to move from tables to divs. I work with them a lot better now than I did then, but it really was only a week to learn how to layout a site with divs alone.