Jump to content
xisto Community
eyvind

Table Layout Vs. Css Layout So using tables is considered bad style?

Recommended Posts

I have heard that using tables for layout in a webpage is bad style. It is possible, but much more of a hassle, to get the same results using CSS (float), but is using float in this way really better style than tables? Most websitesstill use tables.Please give me your opinion, or the "general" opinion uif you think you know it, I'm curious, and can't decide which way yo go.

Share this post


Link to post
Share on other sites

Yes, you are right.Using HTML TABLEs for lay-out is now considered bad style.Yes, you are right.Getting the same results using CSS is much more of a hassle.At least when confronted with it for the first time.But, as always, as more and more people do it, as more and more programs generate it,the use of HTML TABLEs will drop for lay-out andwill continue to be used for what they were invented for:the presentation of tabular data.In my opinion, CSS is the way to go.Personally, I still have troubles with them,so any help that I can find is welcome...

Share this post


Link to post
Share on other sites

Well, I have to admit that I did use tables to generate my lay out. Mainly because it was the first time using tables to put a graphic up :P I do realize that CSS can get the same result and I am looking into it. But I am also working on redoing my site and converting it to php, which is trickier than I had anticipated. So when you find how exactly to do this in CSS, let us know :PI do want to add, that not all broswers support all CSS2 features (IE is the browser I am reffering to of course). This is the case with the a:hover effects in a nested list for example. (To create pop out effects like the ones you get with JavaScript, but then without JavaScript)

Share this post


Link to post
Share on other sites

I already know how to do it in CSS, I was only wondering if it was teh way to go or not.This might not be the best way to do it, but I see no other way.To get a layout like this (the different numbers designate what would be cells in a table):00000000000000000000000000000000000000001112222222222222222211122222222222222222111222222222222222221112222222222222222211133333333333333333111333333333333333334444444444444444444444444444444444444444These are th divs you will need (DIV1, DIV2, etca re just names for referencign here, you don't need to use those names of course):DIV1 -- for the top, no nesting, no positiningDIV2 -- will contain areas 1, 2, and 3, no positioningDIV3 -- for area 1, nested in DIV2, float leftDIV4 -- will contain areas 2 and 3, nested in DIV2, float rightDIV5 -- for area 2, nested in DIV4, no positioningDIV6 -- for area 3, nested in DIV4, no positioningDIV7 -- for area 4, no nesting, no positioningno positioning means no special horizontal positioning, you may need to have some settigns that will keep them from moving around vertically.Hope that helped!

Share this post


Link to post
Share on other sites

I have heard that using tables for layout in a webpage is bad style. It is possible, but much more of a hassle, to get the same results using CSS (float), but is using float in this way really better style than tables? Most websitesstill use tables.

 

Please give me your opinion, or the "general" opinion uif you think you know it, I'm curious, and can't decide which way yo go.

<{POST_SNAPBACK}>


I found an article that talks about the tables vs. CSS dilemma, it describes briefly the evolution of the website design in the last time and, most interesting, the author explains the experiment he made to find out which option outcome better:

https://www.sitepoint.com/tables-vs-css/

 

I hope it can help you clarify which way is better for you. :P

Share this post


Link to post
Share on other sites

Cool, thanx Coach! That did help, I have now set my mind to using CSS.I ahve alsready tried the above solution, adn it works well, but I need to handl some special cases, which I do in PHP. IT works great! But that article jsut amde things so much better, tahnx again Coach!!!

Share this post


Link to post
Share on other sites

You are right, but I can not stand floating layers with CSS. They always manage to go wrong. And what exactly are the problems with using tables? I have only found small errors when using the box-model, of which I don't use. I think it is just another reason for the W3 to bossing us around. Well no more I say.

Share this post


Link to post
Share on other sites

You are right, but I can not stand floating layers with CSS. They always manage to go wrong. And what exactly are the problems with using tables? I have only found small errors when using the box-model, of which I don't use. I think it is just another reason for the W3 to bossing us around. Well no more I say.

<{POST_SNAPBACK}>


I totally agree. I've used both CSS and tables to create site structure, and not only does it take me 50% less time to make a site with tables, but also, i find that tables don't generate nearly as much errors as floating layers with CSS does.

 

I've worked with websites for quite some time now, and it's true that either way works, but I don't see any advantages of using CSS instead of simple tables. I guess it depends on how comfortable people are with either one. Personally, I've never had problems when using tables, but always seem to get at least some sort of error or problem when structuring with CSS.

 

So naturally, tables is what i choose to use. That's my opinion.

Share this post


Link to post
Share on other sites

So, It is apparently that using tabled-layout is easier. I usually use CSS for fancy things like theme styles... In this case, CSS does much better and much more flexible.In my opinion, for the basic web page structure, tables are more likely compatible with all existing browser. I found my pages are displayed differently from one browser to the other when I use CSS style (positioning, margin,...).Some CSS attributes work in this browser but the others.Have you ever tried to view your web pages in several browsers? Do it and see how good your design skill is. Let's consider M$ Internet Explorer, FireFox, Netscape, Opera, Linux browsers (Konkeror, FireFox, Netscape...)... and even Safari on Mac.I have been struggling with my project just because of these browsers. People in my company are using different platforms and different browsers. LOL, each of them complains to me about my pages very very differently. What a shame!!!The more complex is your page, the more likely that compatibility problems will ariseKeep it simple as long as it works for everyone (even though it is not a good style)

Share this post


Link to post
Share on other sites

Reading through the comments of the link that Coach posted is another very interesting link on this subject, where the author attempts to take an objective look at tables and CSS, this time, advocating that tables should be used side by side with CSS. It's an interesting read, at least, and gives some form of hope to people still wanting to use tables...

Share this post


Link to post
Share on other sites

Hmm, I never considered using CSS only for layout before. I am definately going to have to try that out. If you haven't guessed, I'm one of the table users, but this CSS solution has intruiged me. I'll probably start experimenting once I update my website a few times.

Share this post


Link to post
Share on other sites

I use tables for the initial positioning of the page, but the div layers inside of those tables for the smaller elements. The problem with div layers right now is IE's rendering of values that can throw off how they really should be aligned. Padding is my biggest issue with IE right now.

Share this post


Link to post
Share on other sites

Reading this article (and having barely started on my own page as of yet :( ) I'm curious about the author's use of "blank.gif" within some of his cells and his mention of it in the beggining of this article and in the use of his "box".What exactely does that image do and what is it's purpose?

Share this post


Link to post
Share on other sites

It is aspacer, it adds transparent space (it's invisible), to pad and precisely position elements. SPacers are used on many image intensive (especailyl table based) websites, usualy name spacer.gif or something like that, it is just that, a spacer.One thinga bout CSS compatablity. To use CSS effectively now during the browser war (which I think is dying off), you need some scripting to back your CSS up: you check to see what browser and OS the surfer is using and you fine tune your CSS style according to that, you may have separate ones or you change one "dynamic" one. MAybe in JavaScript, that way you would sidestep all compatability issues, granted, it would take a while and be quite tedious to set the system up, especialy to make it reusable.

Share this post


Link to post
Share on other sites

In my opinion, using tables still the best way to manage your'e web page design..It's also make use of cross-browser..so you are not to worry what type of browsers you're client will use.But actually, this forum gives me a hint that i can also create a site more on CSS, that i will try soon.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.