Tables vs CSS

[ANMMark]

Ok, while I know I may be a bit late on the trend thing, I have been reading more and more battles over Table layouts vs CSS layouts, to the point where it reminds me of Windows vs Linux (we won't go there now).

Most of the time, the people screaming the pros of CSS layouts are the same ones who also scream "Browser compatibility!!!" I find that to be ironic to say the least.

My stance is, and always will be.....I'm a table man.

I find tables faster to code, easier to code, and to say the least...more universal.

I have compared the new CSS layout trend to a kid sitting at his computer for a few days with nothing better to do, than to play around with CSS, only to discover that you can position elements on the screen with it, and then....."Ooooh look what I can do!"

Everyone began jumping on that bandwagon, and became similar to gradeschool, where one kid gets the new Kung-Fu Bob action figure with karate chop action, brings it to school, then everyone wants one. Now, if you have Kung-Fu Bob, you are the coolest kid in kindergarten......until, Kung-Fu Bob's arms and legs fall off, from all of the karate chopping action (Kung-Fu Bob is not made to break real boards, and bricks....you have been warned).

My point is...CSS Layouts = nice, cool trend....at least in my opinion. However, tables are more universal and more browser compatible. Remember that all browser support tables, while all CSS is not supported by all browsers. So how's that for browser compatibility young Skywalker?

I'm not saying to abandon CSS. I use CSS attributes for my tables , but let's face it, it's not worth arguing over. People choose to use, what is comfortable for them. As long as they achieve the goal they set out for....who's to say it's wrong, or bad, and who's to say that because they didn't do it the way you would, it makes them less l33t?

 

[pmhoran]

Yeah ... Yeah ... what Mark said. I agree

By the way ... what is a "Kung Fu Bob"???? (That's just me trying to be a smartass)

 

[ANMMark]

what is a "Kung Fu Bob"???? (That's just me trying to be a smartass)

LMAO very well done haha. I made him up of course. I'm thinking I should have those manufactured and sell them....might be a hit in the gradeschool market lol

 

[ldcdc]

Heck, I don't even know how to use CSS instead tables.

Right now I'm in what I will probably call my "Wow! Mambo is cool!" period. So Mambo is my CSS today.

 

[ANMMark]

Well, for those of you that agree with me.....here is some fuel for you, the next time you find yourself in a CSS vs Table debate......

1. You say that CSS is easier on bandwidth.
Q: By how much?

2. You say that a CSS layout loads much faster.
Q: How much faster?
Q2: Where can this be demonstrated in comparison with tabled layouts?

The fact is, that images and flash, etc statistically account for the majority of the bandwidth used in a typical website. In fact about 50%+ Then you have your standard, achor tags, body tags, style attributes, etc, which statistically is about 25-26%. Counting in javascript files, and stylesheets at about 6-10%, and content at approx 25-26%, you'll find that not much bandwidth is actually used by tables.

On the argument of bandwidth...while the page may load faster in the browser, this still does not account for the download time of the massive css files that have now had to be created by the full css site. The css file becomes larger as the site becomes larger. Now since this is the case, you'll find that you have not really eliminated much bandwidth use at all, as the user must still download the css file.

On the argument of the site displaying faster...on typically large sites that are full css coded, the speed only comes in on the subsequent pages. The initial, most important page, must download the large css file initially, thus your impact page actually becomes somewhat slower.

Adding to the file size of the css stylesheet file is the fact that, to make a full css layed out page cross-browser compatible, you'll find that you'll need work arounds, with either additional css or additional javascript, just so the page displays the same, or at the very least close, to the way you had envisioned it displaying. It's already difficult enough to get proper padding and margins, as well as standard font styles to display properly from browser to browser.

In fact, margin styles do not work properly in Mozilla, to the point that you actually have to end up writing in additional margins in the body tags, or additional positioning tags in css, just to get it to appear properly.

As more and more companies like MS, Apple, and mozilla release newer browser, with newer features, the workarounds will no doubt increase, causing the file sizes of a full css coded site to shoot through the roof.

When using a comparison on smaller sites, comparing tables against css div tags, the user will generally notice no difference in the load times. That's not to say there is no difference....I'm saying the difference is so minor that the user will not notice.

I do believe that where the user will notice a big difference in speed is on larger table to css conversions. However, the files size of the css file would become unbearingly larger in this instance, almost eliminating the point entirely, and causing higher bandwidth usage, while the page displays slightly faster on subsequent pages in the site.

In short, when you compare a site made with tables, to the same site made with css, and then throw browser compatibility into the mix, the work arounds needed to make the css coded page, compared to the table coded page, just for the possibilty of looking the same from browser to browser.....You'll find that it is much easier to make a page appear generally the same from browser to browser, when using tables, than it is with CSS, and it's workarounds. Adding those work arounds adds file size to the css file, thus resulting in a very similar overall file size, and that's not even counting tabular data driven sites.

 

[mydarnhost]

Css is better. It makes life a whole lot easier

 

[ANMMark]

That leaves a lot to be explained. I mean, I at least went quite a steps further than saying "Tables are better, so there."

At least explain why you feel that way. I mean I made some pretty damning arguments that not only prove otherwise, but clearly show that using css is not a matter of efficiency, but instead...choice.

 

[Exon]

Css is better. It makes life a whole lot easier

Wow. Good, uh, statement? My car is better than your car!

I'm sorry but I like tables better, for several of the reasons already mentioned.

 

[PVT-Jordan]

I love tables. It has proven to be the easiest thing for me to edit things on the fly. I am also starting to embrace CSS for larger sites that may require some large scale tweaking that would be a pain in the you know what to edit for every page. I try to find a nice blend of the two. Some elements that I may find myself using many times throughout a site would be easier to create a class for then retype the code every time. For me, it really depends on what I'm trying to accomplish. I feel better about myself when I am able to reuse code because in my head (this is weird) I make myself believe that every half of a KB makes a page load faster. Probably the one thing that I really enjoy about using CSS is that it makes the code a lot easier to navigate. It allows me to focus more on the content than the attributes. I feel more organized when I have content in one area and style in another. So I'll try to avoid contradicting myself and say again that it depends on what I want to do when I decide to use tables, CSS, or both.

 

[pmhoran]

I like using tables because I understand how to use them a lot better than I do CSS. I guess that falls into the "Old dog ... new tricks" category

I have to admit ... most the pages I have made for my domains are pretty simple. But ... when I have sat down to "design a good one" ... I guess I am a lot like "Xcel".

I use tables when designing the individual pages ... and I use CSS when I am assigning site wide attributes. I have tried designing sites using mostly CSS ... but I end up either with one huge CSS file or multiple CSS files and that just seems to confuse things for me.

The way I do it, using a mixture of tables and CSS seems to be working the best for me these past few years. Mind you, that is only when I design the sites in HTML. When PHP is thrown into the mix ... I am just totally confused no matter which is used :smilie3:

JMPO
Peter

 

[SpecHackers]

CSS is better, and makes sites look very nice, if you are sharp at CSS u can do miracles, hust check http://www.sitepoint.com and save the page to your desktop.

Just remove their CSS part and look how the webpage looks.

you will understand the powerfull of CSS

 

[ANMMark]

CSS is better, and makes sites look very nice, if you are sharp at CSS u can do miracles, hust check http://www.sitepoint.com and save the page to your desktop.

Just remove their CSS part and look how the webpage looks.

you will understand the powerfull of CSS

I can literally make the same argument for tables.

"Tables are better, and makes sites look very nice, if you are sharp at tables u can do miracles, just check 98% of the websites on the internet and save the page to your desktop.

Just remove their tables and look how the webpage looks."

you will understand the powerfull of Tables"

 

[othellotech]

>1. You say that CSS is easier on bandwidth.
>Q: By how much?

by x amount
*generally* you end up downloading the "layout" information once for the whole site, not every page (as with tables) - on forums it can makes them significantly faster and less of a draw on your bandwidth.

>2. You say that a CSS layout loads much faster.
>Q: How much faster?

not always depends on the browser and the connection - many users are still on dialup and will get the content - i.e. the *important* biut before the design (css) i.e. the pretty bit.

I personally browse with images off and sometimes css off - i'm interested in the content not the arty-farty picture sh!te - that and its *MY* browser so I decide how it looks, what fonts etc not you.

Combine that with the fact more and more people are using other devices than the PC so table based sites will be viewed less and less - you ever used a tabled layout on a pocket pc or phone - forget it - totally useless - may as well have used frames
>you'll find that not much bandwidth is actually used by tables.

its more you have to get the whole table before you get the content - @ 9600 baud that can take a while
combine that width fixed column widths etc and again - you have the "designer" deciding how it should look, not the viewer with the TV set-top box etc @ 540*420 !

>as the user must still download the css file.

if they chose to !
>the workarounds will no doubt increase, causing the file sizes of a full css coded site to shoot through the roof.

software authors have to "educated" as to what standards are - by deliberately not viewing or staying on standards-incompliant sites hit them where it hurts - in the wallet

Yes i'm awkward and draconian

Using CSS alows you to have a totally different look and feel to a site without touching the actual code of the page - worth any design/time overheads if there were any in my book.

 

[ANMMark]

While you said all of that, you clearly said that you browser with CSS off. This means that yu will not be able to view the page at all. With the div positions, paddings, etc defined in that css file, not downloading it, would cause you to see a jumbled mess, if anything at all, on the page.

Remember, I'm not talking about using CSS to complement your site, I'm talking about CSS to completely lay out your site.

One thing, you also missed is that the one time of downloading the css file, generally slows down your most important page....your impact page, the first page the visitor sees.

software authors have to "educated" as to what standards are

1. How can they be called "standards" when there is no standard method? The standards are consistantly changing with technology. So much so that there are 3rd party sites devoted to keeping up with, and listing all of the changes. The last time I checked, that is not the definition of "standard"

2. There will never be a time when all browsers accomodate all listed standards, and they do it on purpose. They do it to keep their edge. There would be asbolutely no advantage to being just like your competition (displaying sites the same across all platforms).

its more you have to get the whole table before you get the content

I believe I said tables, not content. The debate is Tables vs CSS, not CSS vs Content.

Tables use very little bandwidth in comparison to content, images, flash, etc.

*generally* you end up downloading the "layout" information once for the whole site, not every page (as with tables) - on forums it can makes them significantly faster and less of a draw on your bandwidth.

Not accurate in the least. The one key thing you said is "you end up downloading the 'layout'" This means, with the larger CSS file (sometimes multiple CSS files), which contains the entire layout, you have just used the same amount of bandwidth to load that page.

Now, generally what occurs is, you download the CSS file once, and then it gets stored in cache, making the remaining pages appear to load faster. However, when you're using a browser that has no cache folder, guess what.....you download that CSS file over and over again.

I mean, if we're including phones and pocket PCs, which are less common at the moment, why not include the common, no cache browser?

Using CSS alows you to have a totally different look and feel

Including a blank or jumbled page, for those that turn CSS off.

 

[othellotech]

its more you have to get the whole table before you get the content

I believe I said tables, not content. The debate is Tables vs CSS, not CSS vs Content.

the point is that i'd have to download it all to get to see any content if its in tables, not the case with css. on a slow link it can make all the difference between a visitor staying or leaving, those extra few seconds of blank page make the ever-impatient viewer go elsewhere.

this is my opinion, you have yours, we dont have to agree