Web design Table Layout vs. CSS
-
CSS can be a PITA due to browser support (read IE). The company I'm currently working for apparently just realized that CSS exists, and had me go back thru their site and replace all the tables. Let's just say it was a learning experience for both of us.
lintybits wrote:
CSS can be a PITA due to browser support (read IE).
Yes. There is a saying that no CSS Layout is complete without an hack to support IE. :) I have not done much testing on IE7 yet, but it is supposed to be much better.
-
I've been reading a lot on CSS web design and almost every major web designer I have seen uses CSS to do everything to "skin/theme/layout" a website. Also almost all of them say that using tables to do the "skin/theme/layout" on a website is a very bad thing. I've used CSS before but always thought of it as just something to format text and make pretty tables with but my question is: Do you use CSS to do your web layout or do you use tables and why use what you use? Link that got me to thinking of CSS as more than just something to format fonts: http://www.csszengarden.com[^] -Richard
-
I've been reading a lot on CSS web design and almost every major web designer I have seen uses CSS to do everything to "skin/theme/layout" a website. Also almost all of them say that using tables to do the "skin/theme/layout" on a website is a very bad thing. I've used CSS before but always thought of it as just something to format text and make pretty tables with but my question is: Do you use CSS to do your web layout or do you use tables and why use what you use? Link that got me to thinking of CSS as more than just something to format fonts: http://www.csszengarden.com[^] -Richard
CSS and <div>s are the way to go. For one, the implementation of table layout in browsers is a mess. Lots of ugly code for figuring out reflow and styles. CSS + <div>s lead to smaller file size. And you can look at it without the CSS and it'll still be readable. Also, using tables leads to tag soup in your HTML. The structure of the pages is almost unreadable for people coming along and maintaining it. And for those that say that non-<table> based pages are hard to read without the styles, just turn off CSS in your browser and look at the Wikipedia or the Zen Garden. Perfectly readable to me. Ah. Forgot to mention one of the best reasons. If you ever have to do client side scripting, the DOM is sooo much simpler if you don't have a bazillion <td> and <tr>s floating around. A well thought out page structure leads to one of the nicest DOMs to code against. And a nice DOM == a happy JS programmer.
Oh geez... the forum keeps spinning... you'll take care o f it i'm sure, c'ause ... yeah, i neede this. *cough* anyway good job finding the bug. -Shog9 on...a Firefox bug.
Last modified: Thursday, April 27, 2006 1:39:00 PM -- :love: the DOM
-
CSS is definitely the way to go. Table Layout is now outdated. Look at different articles at http://www.alistapart.com[^] It does take a little time to get things right with CSS based layout. I always struggle to get the scaling correct and then to get things working on different browsers consistently. One thing you need to consider is the print layouts too.
That's a bunch of BS that you've subscribed to man. CSS is great in concept, however in implementation across browsers it is hell. Usually the way to "get things right" is to perform horrible hacks that end up making the html way more complex than if you just used a simple fricking table.
-
I've been reading a lot on CSS web design and almost every major web designer I have seen uses CSS to do everything to "skin/theme/layout" a website. Also almost all of them say that using tables to do the "skin/theme/layout" on a website is a very bad thing. I've used CSS before but always thought of it as just something to format text and make pretty tables with but my question is: Do you use CSS to do your web layout or do you use tables and why use what you use? Link that got me to thinking of CSS as more than just something to format fonts: http://www.csszengarden.com[^] -Richard
The problem with tables is not all browsers render them the same and Firefox pukes if you use a nested table (or at least earlier vversions did). Pictures of the menu available at the drive-thru
-
Because everybody can do tables, but it takes a web designer to do it using CSS? CSS is way more powerful and flexible, and tables have some ugly side effects, but everybody who can use Office gets something done using tables. So if you are serious about web stuff, learn CSS and decide for yourself. Otherwise, don't bother. It's like people telling you to use classes "because functions are bad". P.S. I use CSS for fonts and stuff, and tables for layout. Just because.
Some of us walk the memory lane, others plummet into a rabbit hole
Tree in C# || Fold With Us! || sighistpeterchen wrote:
but everybody who can use Office gets something done using tables.
Ah, yes... that brings back memories of collaborative work in school, where we'd spend the last day frantically trying to merge documents... and someone would have decided to do all their headers/footers/columns using tables. Oh, how i hate those. Almost as bad as the ones that used spaces for indentation / column alignment. X|
Now taking suggestions for the next release of CPhog...
-
I've been reading a lot on CSS web design and almost every major web designer I have seen uses CSS to do everything to "skin/theme/layout" a website. Also almost all of them say that using tables to do the "skin/theme/layout" on a website is a very bad thing. I've used CSS before but always thought of it as just something to format text and make pretty tables with but my question is: Do you use CSS to do your web layout or do you use tables and why use what you use? Link that got me to thinking of CSS as more than just something to format fonts: http://www.csszengarden.com[^] -Richard
Richard Parsons wrote:
Do you use CSS to do your web layout or do you use tables and why use what you use?
Both. I use tables for tabular data, and
DIVs&SPANs&CSS for everything else. Because that's how it works the best. :)Now taking suggestions for the next release of CPhog...
-
CSS and <div>s are the way to go. For one, the implementation of table layout in browsers is a mess. Lots of ugly code for figuring out reflow and styles. CSS + <div>s lead to smaller file size. And you can look at it without the CSS and it'll still be readable. Also, using tables leads to tag soup in your HTML. The structure of the pages is almost unreadable for people coming along and maintaining it. And for those that say that non-<table> based pages are hard to read without the styles, just turn off CSS in your browser and look at the Wikipedia or the Zen Garden. Perfectly readable to me. Ah. Forgot to mention one of the best reasons. If you ever have to do client side scripting, the DOM is sooo much simpler if you don't have a bazillion <td> and <tr>s floating around. A well thought out page structure leads to one of the nicest DOMs to code against. And a nice DOM == a happy JS programmer.
Oh geez... the forum keeps spinning... you'll take care o f it i'm sure, c'ause ... yeah, i neede this. *cough* anyway good job finding the bug. -Shog9 on...a Firefox bug.
Last modified: Thursday, April 27, 2006 1:39:00 PM -- :love: the DOM
David Stone wrote:
CSS and
s are the way to go.
I agree that in most situations this is true.
David Stone wrote:
Also, using tables leads to tag soup in your HTML. The structure of the pages is almost unreadable for people coming along and maintaining it.
Well, I would not say that exactly, any good html editor makes it a breeze to layout with tables and maintain them although there is a more code. In some situtation it can take a few seconds to drop in a table instead of messing around for hours trying to get nested divs to align. Depends on the need.
David Stone wrote:
If you ever have to do client side scripting, the DOM is sooo much simpler if you don't have a bazillion
That sure is the truth :) The biggest complaint I have with CSS is the stupid box model. I personally think Microsoft has it correct and CSS fails in this area. As an example, if you have a div and you want it to take up 95% of an area along with having 5px padding.... You are back to nestings divs and writing more code than needed. In Microsoft's box model, padding is included inside the width of the object so that you do not have to care. Now, you add that last one with the fact that most browsers do not support Microsoft's box model leads to nothing but nightmares. Another example is a two column box, with the CSS box model you run into problems with just two divs if you again use percentages (which I use to use all the time to make designs more flexible). Two divs side-by-side both at 50% with a 5px padding and you are doomed. I have seen all kinds of Javascript hacks just to keep good multiple column css layouts where the columns stay even and stretch all the way to the bottom as is often desired. Scrap the box model in CSS and give us a good vertical hieght specification and make it all work with percentages along with being cross browser compatible and we would be on the right road. Another bad point for table layouts however is that they are slow in some browsers because they may not render at all until the full content of the table is loaded. There are ways around this, but many beginners miss this point. CSS though (not the religious version that all presentation layout should be in a stylesheet) is great to reduce the burden of maintaining sites since many of the styles are defined in a seperate stylesheet allowin
-
The problem with tables is not all browsers render them the same and Firefox pukes if you use a nested table (or at least earlier vversions did). Pictures of the menu available at the drive-thru
Toasty0 wrote:
Firefox pukes if you use a nested table (or at least earlier vversions did).
I haven't seen that since it was called Firebird...
Oh geez... the forum keeps spinning... you'll take care o f it i'm sure, c'ause ... yeah, i neede this. *cough* anyway good job finding the bug.
-Shog9 on...a Firefox bug.