|
CSS Formatting vs Tables
I spent the last few weeks attempting to replace most tables that I use for formatting within my site to just CSS. I have come to the conclusion that this is just not possible in all but the simplest of formatting scenarios. In addition, looking throught the CSS of Fog Creek and other sites that Dave Shea has written, I gather that he sticks to tables for the more difficult formatting scenarios and CSS for the well-supported formatting stuff. Does this concur with what others have experienced? I am curious to hear if others have had similar issues trying to move away from tables for HTML formatting.
Thanks,
---Seeker
Seeker
Thursday, April 22, 2004
I'm not doing anything really complicated with my layouts, but I've found that it's usually easier to use CSS for what I do. Where I run into problems is when I've got background images that need to be positioned relative to some text element. Then I've pretty much got to use tables.
Clay Dowling
Thursday, April 22, 2004
Zeldman calls your solution the Hybrid Layout in his book (which I use) although instead of complicated versus easy, he advises using tables for an overall page grid and css for everything else.
He discusses this in an excellent online article:
http://www.alistapart.com/articles/journey/
Joe Hendricks
Thursday, April 22, 2004
From my experience, vitually any layout can be accomplished with CSS, it's just a matter of figuring it out. When I was first working with CSS, tables seemed easier because I wasn't used to CSS, and it's really a different way of thinking about layout.
Check out the CSS Zen Garden to get an idea of how complex CSS layout can be. There are a hundreds of excellent designs, all with the same HTML.
http://www.mezzoblue.com/zengarden/alldesigns/
eaw
Thursday, April 22, 2004
We use a hybrid approach because pure CSS formatting for layout has problems for a lot of common browsers.
I know of at least one site where the developers have a CSS-for-everything mentality. Parts of their site (and it's a MAJOR site) look like crap in Internet Explorer.
Almost Anonymous
Thursday, April 22, 2004
Not sure what exactly you are trying to achieve, but CSS is a lot less painless then tables.
True, it requires a bit more thought upfront than tables, but it is so much more powerful. Look at sites like csszengarden for examples.
How were your current pages created. If you are going through them one at a time, then you are probably pretty stuffed. Easy migration is where you spend time on one design. Create .css file to drive site. Spend time rewritting template to use .css file for display logic, and presto, you have a css file.
If you are doing the one at a time thing, you might actually want to spend a bit of time implementing a templating framework before you use CSS.
Tapiwa
Thursday, April 22, 2004
Looks like someone beat me to the css zen garden recommendation.
AA, think you are more likely to break browsers with tables, nested tables, 1x1 padding GIFs than you are with .css
<ducks>
Tapiwa
Thursday, April 22, 2004
Thanks for the feedback.
I actually started out on the css zen garden. It is an excellent site. But if you notice, all of the HTML is very straight-forward. divs with spans and paragraphs and list items.
I am using a templating system, so no "manual" conversions per say. However, when it comes to a particular portion of the site, I will re-code the css to work best for a particular area.
CSS is fine for general layouts of paragraphs and positioning elements. I have no complaints about that. The problems arise when you have say a list of items, with a different background color for each, with an image for each, and a list of attribute, value pairs that must be formatted with equal widths (like a table), followed by a link. This is typical for something like a shopping site.
Trying to float them all results in the loss of being able to have a containing element with a background (without jumping though big hurdles of specifying widths and heights).
All of the CSS I have seen to format data in a table-ish way with fixed column widths involves using floats and percentages. This works fine for a single occurrence, but falls apart with multiple nested occurences and especially when dynamic content is concerned.
So, while anything is possible in theory with CSS and formatting, in practice I have found The Hybrid (thanks for the link :) ) approach works best for now.
Seeker
Thursday, April 22, 2004
If your content is tabular then you should keep it tabular.
CSS is not meant to replace tables entirely. If you f. x. have a shopping site (as you mentioned) with Items and Price you should keep the table holding the values.
Of course if you link your site maybe we could give some constructive feedback on the Issue.
Peter Monsson
Thursday, April 22, 2004
css layout is the way things will be done, but not until more people move to more standards compliant browsers or IE gets a major overhaul.
Zeldman always focuses on standards compliant over tableless and you can achieve that using tables. So I wouldn't worry too much about using tabless design for everything especially a client site.
Personal sites always seem to be closer to the cutting edge and a good place to start putting css layout to work.
anyway just my thoughts
new poster
Thursday, April 22, 2004
Many people confuse CSS and table-less design. The two are not dissimilar, but the difference is important. If you have tabular data such as - product specifications, catalog listings, or even data entry forms, you should probably put that data into a table. Our company site is currently a hybrid site with a header, three columns, and a footer. Additionally I have product information (specs) in tables.
I designed the site this way after removing it from a heavily tabled version. This "freed the content" and now a majority of the site is in relatively clean XHTML. In the future (next month) I'll be moving to a completely CSS driven site (except for the spec sheets and a user form - which may be done in CSS if I feel particularly aggressive).
By working in stages I was able to get a majority of the benefits fo CSS without all of the work. The legacy tags are now removed (font, nested tables, etc) and I only have a small supporting shell from the old site to replace when I move on to a completely CSS driven site. I suggest that you look into working in stages as well. You may find no need/desire/ability to move beyond a hybrid site with clean content, but at least you'll have most of the flexibility with your design and content.
Lou
Thursday, April 22, 2004
I'm in a similar project. I've found parts of this site helpful:
http://glish.com/css/
They cover a lot of the cross platform gotchas I've run into.
That said, I'm still going with the hybrid approach mentioned above.
Lee
Thursday, April 22, 2004
I saw the CSS Zen Garden, I saw Eric Meyer's site, I saw max design. I thought, I want to do that. I want dump tables and create a site based on CSS. I *will* do that. I *can* do that.
Then I discovered that a column-based layout requires an abuse of CSS (i.e. it works, but it wasn't exactly intended for that purpose, you have to think boxes not permanent division of "browser space"). I discovered that floats and margins have small little incompatibilities between the browsers (of course, IE is the worst offender). I tore my hair out over my site redesign, but I got there in the end. No tables.
A lesson learned: In future, I'll use tables where I want some simple grid-like layout. The CSS float model is just not designed for such things.
Joel Goodwin
Friday, April 23, 2004
CSS should be a means, not a goal. What is the current problem you are having that pure CSS would solve?
Just me (Sir to you)
Friday, April 23, 2004
Using CSS to style web pages first of all requires the designer (and whoever creates the html) to forget imposing an absolute layout on the reader/user.
Converting a fixed tabular layout using CSS can and will work, but it rarely achieves the flexibility that CSS is intended for. Not so much the flexibility for the author, but the flexibility of the user in viewing the content.
Yes there are problems in building a single contained model given the IE bugs in the box model but a great many of those problems go away if you first abandon the idea of confining your content.
Simon Lucy
Friday, April 23, 2004
this article was written by a person in a position similar to Seeker's. might be useful:
http://www.bobbyvandersluis.com/articles/learningcurve.php
eaw
Friday, April 23, 2004
Thanks for all the feedback. I am realizing that to some degree (as a result of that last link) it may be that I am stuck in too much of a grid mindset. For lists of items, tables do seem to work best. Perhaps if I try to move away from this mindset, I will not have so much difficulty trying to emulate my old table structures.
For non-grid structures, CSS is by far superior to tables. To be able to move containers around is very powerful and flexible.
So on an ending note as this thread gets pushed closer and closer to the bottom of the list, I would like to say that CSS is my choice in 90+ percentage of scenarios. Once CSS2 is more universally supported that percentage will be pushing 100.
Thanks for the discussion.
Seeker
Friday, April 23, 2004
"In future, I'll use tables where I want some simple grid-like layout. The CSS float model is just not designed for such things."
No wonder you pulled your hair out. You shouldn't use floats for columnar layouts. You should be using absolute positioning (perhaps embedded in a relative position anchor).
Brad Wilson (dotnetguy.techieswithcats.com)
Friday, April 23, 2004
My problem with CSS positioning is that it doesn't let you define the edges of the boxes in terms of the edges of the other boxes, which is the way most desktop publishing and GUI applications work. That is, I want to be able to say "The top edge of box C will be at the bottom edge of box A and the left edge of box C will be the right edge of box B."
While you can sort-of, kind-of do something with nesting div elements, the main paradigm of CSS seems to be that each div exists in it's own universe and it's the CSS designer who has to manage the mental model of the page (eg. "okay, I know that the nav bar is 120 pixels, so the left margin of the main content div should be 122 pixels from the browser window edge").
At least, that's my rant.
Bill Tomlinson
Friday, April 23, 2004
This thread is reaching it's natural conclusion but I'll add some words anyway. Brad, it's not so unbelievably far-fetched to use floats. During my research phase I found a lot of CSS-based column layouts that use floats:
http://css.maxdesign.com.au/floatutorial/
http://www.alistapart.com/ (uses float for 2-col layout)
http://glish.com/css/ also features a design or two with floats
I tried absolutes but it didn't work out with my design. [insert replies here indicating that the design must be flawed and not user-friendly] There are so many little pitfalls. For example, one of my concerns is if Column A is shorter/longer than Column B, then is everything still okay? A quick look at your site Brad, reveals the nav bar. I copied your page to my drive, yanked out a lot of the content, and suddenly the nav bar wraps into the main content area. There is, of course, no problem on your site, but on my site I don't know whether A or B is longer.
My view of CSS is that, unlike it's rather unkempt predecessor HTML, it is a full-time job. CSS is not something you can pick up in a few minutes, which I find a little sad.
Lastly, I found this page on the web some time ago which summarises a lot of my own feelings regarding CSS:
http://www.barry.pearson.name/articles/layout_tables/css_positioning.htm
Joel Goodwin
Friday, April 23, 2004
The reason my site does that is because it's an older design. That wouldn't happen with a newer, absolute position system. (This is a lesson I learned after my current blog design, and at times, it makes my pull my hair out. You see, I'm speaking from experience. :-p)
I use absolute position elements for a 2-column layout on the home page of my articles site.
http://www.dotnetdevs.com/
My two columns are styled "NavBar" and "Content", and this is the style I use:
.Content {
margin-right: 15em;
}
.NavBar {
position: absolute;
right: 0;
top: 0;
width: 13em;
}
Note that I have a "position: relative;" on the body element, so those absolute positions are relative to the body element (and its associated margins), not purely absolute.
I don't find that particularly difficult to understand. The sections never overlap into one another.
And if you're curious why I used widths and margins in EMs instead of pixels, it's so that the bars will grow when the font sizes grow (for users who wish to have larger fonts), and remain proportional. Visit the home page, and adjust your fonts to larger and smaller sizes, and you'll see what I mean.
Brad Wilson (dotnetguy.techieswithcats.com)
Saturday, April 24, 2004
"My problem with CSS positioning is that it doesn't let you define the edges of the boxes in terms of the edges of the other boxes, which is the way most desktop publishing and GUI applications work."
I can appreciate that. What you need to accept in order to be happy is this simple statement:
THE WEB IS NOT A MAGAZINE.
Repeat it until you REALLY understand it. This is a fundamentally different medium, and trying to shove that square peg into a round hole results in nothing but frustration. When you've truly accepted this to be fact, then you won't be trying to control things down the last sub-pixel like with a print published layout.
Brad Wilson (dotnetguy.techieswithcats.com)
Saturday, April 24, 2004
By the way, I'm not anti-tables. Tables should absolutely be used for tabular layouts. And, yes, there are certain layouts that are much much simpler with tables.
HOWEVER, where CSS can provide adequate layout facility, you'll find that the CSS solution will almost always be much simpler to understand now, and much simpler to maintain in the future. If there's one really significant down-side to using tables, it's the quantity of "markup noise" inside the content.
And remember... CSS and tables are not mutually exclusive. When I need to use tables for layout purposes, I still use CSS to set the styling attributes off those table cells.
Brad Wilson (dotnetguy.techieswithcats.com)
Saturday, April 24, 2004
Yeah, yeah, I've heard the "web is not magazine" line before. And that isn't what I'm talking about, have a closer look at what I wrote. If anything, I want to have to do *less* margin specification, not more.
To take your example above, and to add a little made up syntax in the .Content margin definition, here's what I'm asking for:
.Content {
margin-left: <.NavBar!right>+2em;
}
.NavBar {
position: absolute;
right: 0;
top: 0;
width: 13em;
}
That's all, just one change that lets me reference the dimensions of one box in the definition of another.
In fact, that seems more web-ish (and less magazine-ish) than having to manually tweak the margin number of every box on the screen whenever there is a layout change, as we do with the current CSS.
Bill Tomlinson
Monday, April 26, 2004
So use active code to generate your CSS.
Brad Wilson (dotnetguy.techieswithcats.com)
Monday, April 26, 2004
Of course I can work around the deficiencies of CSS, that isn't the issue.
But do you really think that my suggestion is unreasonable or against the principles of CSS? Would it not be a worthy addition to, say, CSS3?
Bill Tomlinson
Tuesday, April 27, 2004
Personally, I do think it's pointless. Not because it's not a worthy addition to CSS, but because we're basically at the end of life for those specifications.
Whether we like it or not, HTML 4.01 + CSS 2 is as far as this spec is going. XHTML 1.x was a hack job, and XHTML 2.0 isn't backward compatible. Combine this with the fact that IE things the current specs are "good enough", and isn't putting any more significant effort into IE... I'd say the death warrant for HTML is signed and sealed. Where it is, is where it stays.
Brad Wilson (dotnetguy.techieswithcats.com)
Tuesday, April 27, 2004
That should be "MS thinks", not "IE things". :-p (Waiting for that Edit button...)
Brad Wilson (dotnetguy.techieswithcats.com)
Tuesday, April 27, 2004
Well, that angle I will agree with. I agree that we're not likely to see further advances in CSS. It will either be nothing new or something different, for the reasons you cited.
So for now, that means use CSS positioning, with all it's quirks and, I argue, serious flaws; or junk it and use tables for layout. And the people have voted with their feet for tables, dispite the pretty demo sites.
Bill Tomlinson
Wednesday, April 28, 2004
I don't understand why the argument is always couched in tables vs. CSS. That's only how the fringe viewed it. I tried to go down that path, but I see now that it's kinda crazy.
Some layouts are just plain simpler (or even possible at all) with tables. They are very rare, but in the cases where it's appropriate, use them. Even when using tables, you still use CSS to style everything, including the table itself.
However, and this is the important part: if one wants to get better, and be able to write more flexible layouts, then one needs to stop using tables as a crutch for their lack of knowledge of or comfort with CSS.
And, obviously, presenting tabular data should still be done with tables.
Brad Wilson (dotnetguy.techieswithcats.com)
Wednesday, April 28, 2004
 Recent Topics
Fog Creek Home
| 
