Css Vs. Tables - A Reflection... Will CSS foil Tables plot and save Gotham?

[eubanksd 0]

I'm in the process of trying to learn how to design with Cascading Style Sheets because, the way I see it, they are portrayed as the next generation of web design and the end of Table layouts. It's been years since I had a web site, and what I had back then wasn't exactly eye-popping in regard to appearance (or content for that matter). I of course used tables to do my layout, as that was just how it was done back then (and still is today, often times, which I'll cover later), but even then -- and even to a novice like me -- it just didn't seem right. It felt like there had to be (or should be) a better way, and when I heard of CSS and did some research on it, I knew that was it.

 

Unfortunately, the promises of CSS are unfulfilled. Of course, eliminating the need to position elements with tables is not the sole -- nor main -- goal of CSS, but it's one of the topics you'll see mentioned repeatedly should you do some googling on the matter. Also, a lot of the problem is not with CSS technology itself, but lies with the mainstream web browsers that can't seem to get on the same page and seemingly refuse to support a unified standard. OK, OK, that last statement was a little harsh to be directed at all of the mainstream browsers, as FireFox is very standards compliant, not to mention probably the most appropriate CSS renderer. It's no secret that the true miscreant of the bunch is Internet Explorer, but Opera, and even FireFox have their annoying quirks as well.

 

The impetus for this rant actually came when I was trying to accomplish a few things with my online banking at BankOfAmerica.com. I don't know what lead me to check the source of the page, but I did and noticed that they use a table-layout to position page elements. This set off a chain reaction, and I started checking other big-name sites to see which method their designers implemented. Out of about seven or eight sites, over half used a table-positioning scheme: Bank of America, eBay, Amazon, and even Google. The CSS-true sites were YouTube, Wikipedia, and MySpace. This just goes to show that while CSS may be the wave of the future, this is the now. Google and eBay -- completely cyber-based business behemoths on the cutting edge -- probably pay tens of millions to their teams of web designers, who are the cream of the crop in their field I'm sure; the fact that these hot shots chose tables over CSS speaks for itself I think.

 

So in conclusion, I guess my point is CSS is a really promising technology and is the wave of the future for web site styling, but it's not there yet. Let's get some opinions on the issue, shall we?

 

Notice from Mark420:

Not really a Tutorial at all this one..Im moving the topic to the right area.

 

 

[closed 0]

promising? it seems that your talking about css3...to make your job a little bit easier you can search and download css layout around the web. of course you can modify it for your needs.

[eubanksd 0]

promising? it seems that your talking about css3...

Well, I meant whatever the latest supported version is. So if CSS3 is the latest, I guess that would be the most "promising," and thus would be what I was referring to. Forgive me, I'm not up to date on all that.

to make your job a little bit easier you can search and download css layout around the web. of course you can modify it for your needs.

I am doing just that. It may be a little bit harder to get the information you're looking for by gleaning it from the desultory database that is the web, but it can be done if you persist. It sure is cheaper than buying books, though I do that every so often too.


Note: Sorry about putting this in the wrong thread, I should have payed more attention. I was wondering why it didn't show up as a new thread after I submitted it! Thanks for relocating it to the appropriate thread, Mr. Mark.

[Punkcat 0]

The next generation of CSS, which will be CSS3, will allow for many solutions for the headaches designers have today. For example:
-Hue/Saturation/Lightness values for colors
-opacity for colors
-multicolumn support (for a way round it, try Yahoo yui CSS Grids)
-round corners for boxes
-drop shadow for boxes and text
For more info about this, try CSS3.info

But remember that all CSS are just recomendations, and not a standard, so even whent CSS3's fully documented and released, it doesn't mean that all browsers will integrate it all in their rendering.

[closed 0]

...It sure is cheaper than buying books...
...

just bought some books on xhtml/css layouts before, and didn't found them useful.
i understand this stuff by doing and reading html/css codes.

and for css3, some features are now available on latest broswer e.g. ff2, ie7.0...

[eubanksd 0]

But remember that all CSS are just recomendations, and not a standard, so even whent CSS3's fully documented and released, it doesn't mean that all browsers will integrate it all in their rendering.

I could probably find this out for myself but I'm trying to use my free time for soaking up as much information on the technologies I'm interested in learning (Java, Servlets & JSP, PHP & MySQL), so I'll just ask you: What's the deal with this? I know CSS is always being revised and updated, but isn't there a stable standard of the technology that should be considered a "standard." It's such a useful technology in my opinion, and I know the W3C is always pushing for standards on it and keeping it nice and neat; isn't there a release that all browsers could comply with? I know there's no way to force Microsoft to do a thing on the matter, but my question is, shouldn't they? Isn't CSS2 functional enough for everyone to say "OK guys, we'll just implement this word for word." Wouldn't that just make everything so much easier? Or is CSS2 not as complete as I'm assuming?

 

just bought some books on xhtml/css layouts before, and didn't found them useful.

i understand this stuff by doing and reading html/css codes.

I get alot from books (mostly For Dummies and things of that ilk), but I get more from the web. This isn't because books are less resourceful or less comprehensive -- just the opposite in many cases, I think -- but is because I'm too cheap to buy a bunch of books, and am forced to peruse the web. However, on my lunch break I often visit the Tech section in the Barnes & Noble next door, and find it much easier to get answers and information from books versus Googling. I've never been asked not to loiter, but I bet one of these days they'll tell me buying a cup of coffee does not give me the right to have a seat and read a book I haven't paid for. But hey, until then... ha!

[Quatrux 4]

and for css3, some features are now available on latest broswer e.g. ff2, ie7.0...

Could you tell us what kind of features? I am a bit curious, due to in a quick search didn't find anything specific..

[Orca239 0]

I'd definatly like to use CSS if it could get around using all those annoying tables. You move one and it makes the rest go the other way, then the rest won't move back and then you try to space it out but it all spaces out... It's just way too tedious. I hate tables in websites x_x;; That CSS3 stuff looks nice, I'm gonna look up some more info on it later. Shadowed text and round boxes? Very nice, square-cut corners on everything gets annoying on some graphics, so that would definatly be a plus. And the multi-column support thing would help me sooo much.

[closed 0]

...

but I bet one of these days they'll tell me buying a cup of coffee does not give me the right to have a seat and read a book I haven't paid for. But hey, until then... ha!

some books are useless, specially most books related to xhtml, newly published but the tech and example is out-dated sux...

 

 

Could you tell us what kind of features? I am a bit curious, due to in a quick search didn't find anything specific..

a very informative post from Valkyria

...

-Hue/Saturation/Lightness values for colors

-opacity for colors

-multicolumn support (for a way round it, try Yahoo yui CSS Grids)

-round corners for boxes

-drop shadow for boxes and text

For more info about this, try CSS3.info

...

[Moon Child 0]

Wow, I didn't even know there was such a thing as CSS3. I don't really keep up with the coding news, but all of those features Valkyria mentioned seemed to come in real handy, especially the drop shadows and round corners. That would really enhance the visual looks of a site even if the creator is a beginner. It sure would cut down on loading time too since people probably won't have to use try to re-create those features in an imaging program and go through all that trouble.

[Harvest.Jacobina 0]

I just have trouble with CSS. It's not as easy as HTML and the codes are complicated!

[pyost 0]

But that's the main advantage of CSS! There are numerous things that can't be done with the use of pure HTML which the "complicated" symbioses of XHTML and CSS can Unfortunately, there are a few things that aren't easy to accomplish with CSS, whereas unpopular HTML tags do it easily. Just yesterday I was trying to add several lines of text next to an image, but aligned with it's bottom. Using align="bottom" with the image would do just fine if it were only one line of text. As I could put CSS vertical-align to use (at least I didn't know how to), I had to think of another solution. Finally, I came up with two - one without CSS, and one with.

 

The solution without CSS included a two-cell table, where one cell would have valign="bottom". I ended up with some bulky code, but it worked in all browser. However, since my client insisted on a tableless design, I had to go with the other solution, which require a considerable amount of tweaking. I put the image (with fixed height) in a DIV container which was assigned a height in pixels (the container, not the image). I also gave the container position: relative, so I could use absolute positioning in it. After doing so, I placed another DIV inside the container, and assigned it a width, position: absolute, bottom: 0px and left: 133px. And there you are: a DIV that contains text always aligned to the bottom of the image

 

As you can see (almost) everything can be done with CSS, though not always in a nice-looking way - but it sure does altering a site's design easier

[korireed 0]

CSS, I would say, IS the future of Web Design and Development.I feel that CSS does at this point have its limitations, and needs some further expansion, including better methods for rounding corners.However, CSS does not even have to be used as a LAYOUT method for setting up sites/pages.You could simply use CSS to STYLE the site, i.e. change the colors/effects, and still use the old fashioned table layout methods.However, CSS can be used for layouts, as you well know.Personally, I feel that the table method of layouts is old-fashioned and out-dated. Using CSS and DIVs makes life so easy, and allows for greater flexibility.The real kicker for CSS, that I feel makes it so great, is using it to bring consistency to your entire site, easily!You can style an entire site, with millions of pages, with just ONE CSS document! And then if you need to change a part of it, you can change it in the file and since it is rippled throughout the entire site, with just that one change, is what makes it so beautiful!It saves you loads of time by not having to go back, page by page, and change everything manually! That is where and why I feel CSS really is the best method for designing sites.

[iGuest 3]

Name:PeterYou are right, although CSS allows for a lot of flexibility and graceful degradation, and on the grand scale it is the way to go, the browser support is bad to this day. There are also some logic flaws in the CSS itself, specifically the box model, where padding, borders and margins are all on the outside of width.When I get request from clients, say an older professor, who wants me to design a site which will look good but he also would like to edit and expand it himself, I honestly can not stick him with a CSS design, which I know he will not be able to manage successfully.A simple table design, with some SCC classes to control fonts and headings is definitely the way to go in this case.I think that the concept of accessibility, should be extended not only to the people viewing the web but also to the average folk who want to participate in creating it.-Peter

[ScepterDonFetti 0]

I am one that has fell in love with using CSS to build layouts.It can totally separate the design of a site from its' code. It eliminates spaghetti table code andmakes your web files smaller so that browsers can load them faster. It makes creating a fullyskinnable website easy. In fact I've built several layouts that can be easily customized by thevisitors to the site. Each visitor is allowed to see the site in the way he/she wants to and it doesn'tjust have to be color schemes either. It is possible to give the end user total control over thelook and feel of a website built with CSS.As far as browser compatibility goes, I suggest using server side scripting to render a separatestylesheet for each browser that may visit the site. It's still easier to do than to fight with thoseannoying tables, will make your web pages load faster too.