PDA

View Full Version : CSS vs Tables



Spider
09-11-2009, 09:12 AM
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
09-11-2009, 10:55 AM
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 (http://www.zimbio.com/SEO+Tools+and+Company/articles/111/Top+10+Reasons+CSS+Better+HTML+Tables)

cbscreative
09-11-2009, 11:08 AM
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
09-11-2009, 11:18 AM
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
09-11-2009, 11:46 AM
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 (http://www.lynda.com/home/ViewCourses.aspx?lpk0=29) .

Second have a look here: css Zen Garden: The Beauty in CSS Design (http://www.csszengarden.com/)

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
09-11-2009, 12:36 PM
1. Don't pay for CSS learning resources. There are great free options like W3Schools (http://www.w3schools.com/css/). 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
09-11-2009, 01:36 PM
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
09-14-2009, 02:07 AM
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
09-14-2009, 08:25 AM
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
09-14-2009, 11:33 AM
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.

billbenson
09-14-2009, 08:47 PM
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.

But do you use tables for tabular data or div's? I'm referring to tabular data contained in layout div's.

vangogh
09-14-2009, 10:05 PM
For tabular data I'd use a table. There's nothing wrong with using a table. The question is whether or not to use them to structure the layout of your site. But even with tabular data there's no reason to nest tables.

billbenson
09-15-2009, 03:23 AM
For tabular data I'd use a table. There's nothing wrong with using a table. The question is whether or not to use them to structure the layout of your site. But even with tabular data there's no reason to nest tables.

That's not what I was referring to though, if I understand your answer:

A short table of socks (for a lack of better examples at 3:20am)

div
table
tr
td black
td blue
td green
/tr
/table
/div

Not the best table I've ever written, but you get the idea. Tabular Data not nesting of tables for layout. If you did a three column twenty row table for socks or whatever, you would have a mess of nested div's that would be very hard to read. This is what the origin of tables were made for; not layout.

bacterozoid
09-15-2009, 07:22 AM
For tabular data, I would use a table in most cases. It is so much easier to work with.

Using divs for tabular data isn't that complicated to do, though.


<div style="position:relative">

<div style="position: absolute; left: 0px">data<br/>data</br>data</div>
<div style="position: absolute; left: 20px">data<br/>data</br>data</div>
<div style="position: absolute; left: 40px">data<br/>data</br>data</div>
<div style="position: absolute; left: 80px">data<br/>data</br>data</div>

</div>

The problem is that, unless you have very simple data, you can run into all sorts of problems. If your data is too long, it will overlap the next column. If you wrap the data, then your rows become misaligned. There's no cross-browser way to trim the data, either (like with ellipsis). There's also no way to address an individual cell or row unless you use divs for rows instead of columns, which then makes your code way more complex than it has to be.

vangogh
09-15-2009, 11:00 AM
Sorry Bill. I was typing too fast in my post above. I would use a table for tabular data. You could use a div to build a table and it isn't too hard, but that's why tables exist, so it makes sense to use one.

Nesting divs doesn't cause quite the same problems as nesting tables, but you probably don't want to be nesting too many levels of divs either. If you are odds are there was a better way to layout your site.

billbenson
09-15-2009, 05:59 PM
Using bacterozoid's example above which uses positioning, if your page is using floats, is this going to use the current floated div as the reference, or is this going to relative to the wrapper or something else?

bacterozoid
09-15-2009, 07:40 PM
When you place absolutely positioned elements inside a relatively positioned element, the absolute elements position themselves relative to the relatively positioned element.

That's a fun one to read.

So, in my example, the columns are relative to the container, not the window. This should hold true if you're floating elements to the left or right, but I'd test to be sure ;)

billbenson
09-15-2009, 07:45 PM
I'll mess around with it. Thanks,

Bill