Page 1 of 3
Sell me on CSS-Layouts.
Posted: Mon Mar 26, 2007 9:27 pm
by JellyFish
Why is CSS-Layouts so great?
Why do, if you do, prefer CSS over Table layouts?
What's is wrong with tables?
Posted: Mon Mar 26, 2007 9:38 pm
by Luke
This
one site can explain all of this for you...
http://www.csszengarden.com
Posted: Mon Mar 26, 2007 9:44 pm
by Kieran Huggins
look at table layouts without CSS and images (view->page style->no style) - do they still make sense?
OK.. now that you've retorted "nobody sees them like that" think about how the Google spider sees them, and how screen readers see them, etc... We're entering the age of the semantic web, you can no longer afford to have your data all over the place in the wrong containers because you're too lazy to learn a better method.
Table layouts were an ugly hack to help designers who either didn't know or care about usability.
Also, have you ever maintained a table layout? It's more painful than redesigning with CSS!
Posted: Mon Mar 26, 2007 10:09 pm
by JellyFish
I'm not saying not to use CSS. I'm just wondering why you need:
Code: Select all
<div class="table">
<div class="tr">
<div class="td">
</div>
</div>
</div>
over:
Code: Select all
<table>
<tr>
<td>
</td>
</tr>
</table>
???
I don't know if this is how you do it but I'm sure I've seen this done somewhere.
Posted: Mon Mar 26, 2007 10:18 pm
by Luke
You can use tables for tabular data (bank account data, multiplication table, etc.)... that's what the tags are for. The only time tables are discouraged is when you use them as a hack to lay out your site.
Posted: Mon Mar 26, 2007 10:34 pm
by JellyFish
How else could you lay out content aligned to the left and content aligned to the right both aligned vertically with each other?
Code: Select all
<table>
<tr>
<td>
Content aligned to the left
</td>
<td>
Content aligned to the right.
</td>
</tr>
</table>
There are other things that seem cumbersome with CSS, although I just might be ignorant, that tables could easily solve.
I'd like to make a switch from tables, but the only way I could do that is find a learning source that covers everything that tables can do and shows you how to do it in CSS.
And btw DevNet is built with table layouts.
Posted: Mon Mar 26, 2007 10:44 pm
by Kieran Huggins
I know - phpBB2 uses tables for layout... (I wondered when that argument would pop up)
Code: Select all
<div class="table">
<div class="tr">
<div class="td">
</div>
</div>
</div>
should never exist, because you actually seem to need a table here.
The thrust of CSS-based design is to use the right tool for the right job. If you want your nav on the left, place it there. If you want content 200px over, place it there. It's really quite straight-forward once you start to learn about it.
Google for "layoutomatic" to get you started, and READ about CSS.
Posted: Mon Mar 26, 2007 10:54 pm
by Luke
also, get out of the "I want to do it how I did it with tables" mind-set. That is part of the problem... css layouts allow you to do MORE than tables did.
Posted: Mon Mar 26, 2007 11:04 pm
by JellyFish
The Ninja Space Goat wrote:css layouts allow you to do MORE than tables did.
And what's that?
and READ about CSS.
I think I got it down... What more is there to it? Selector, property and value.
The problem I'm having is knowing how to do things.
Like a div with width set to zero in css would actually be zero pixels without considering the content within the div. As with tables this wouldn't be the case. How would you do this with a div?
Posted: Mon Mar 26, 2007 11:31 pm
by pickle
I for one have not been sold on "CSS at all costs" layouts. That said, I try to use tables as little as possible. I am familiar with the code kludge tables can generate, so I try to keep my code as simple as possible.
The current layout for my website (
http://nderson.ca - doesn't look too hot in IE) is made using tables. Why? Because it took me about an hour to write up and actually uses less XHTML/CSS lines to display than the CSS-based equivalent. That CSS equivalent took a good friend of mine (who by all accounts is a CSS guru) about 4 days to build (not solid mind you) and it
still wasn't perfect. The XHTML for the table-layout is almost identical to the CSS based version, only I used <table>, <tr>, and <td> tags rather than <div> - so no loss of semantics there. As for a screen reader, since the code is laid out the same, there's no loss in readability.
I have yet to see a fluid layout with static width sections that is anywhere close to as semantically easy to read as a table-equivalent.
As for only using tables for tabular data - that's a tough pill to swallow. <p> tags are only supposed to be used for text paragraphs, but they're used in layouts for non-text stuff all the time. <ul> weren't initally intended for non-bulleted, horizontally aligned menus, so should we scrap that idea? Tables can be very effective tools for easily making simple layouts - what difference does it make that some whitepaper authored decades ago states that tables are only to be used for tabular data?
Yes, CSS does allow you to do more than tables could - I won't begrudge that. Magically positioning divs & whatnot is definitely cool. However, I think more often than not, if properly used, tables are more effective at doing what tables do, than trying to cludge together divs & CSS to do the equivalent.
Finally, I hope nobody's put off by my defence of tables. If you can and want to use CSS, go right ahead. I'm just saying - tables have their place for doing more than displaying quarterly earnings & price lists.
Posted: Mon Mar 26, 2007 11:41 pm
by JellyFish
Although, looking at css Zen Garden, it's very interesting and clears things up a bit. Where could I learn all the techniques for CSS layout disign? What's the best online resource out there? What's a good book for me to check out on it?
Posted: Tue Mar 27, 2007 12:00 am
by Luke
@pickle:
I have found pure css solutions (which were just as easy as their table counterparts) for any layout problem I've ever had except one... forms. I just can't justify using anything but tables to lay out forms. I am sick of trying to emulate tables with divs and/or data lists when tables are just the right fit for form layout.
Still... I think 100% pure css layouts are going to be easier to see/read on a portable device than a table-based layout, regardless of how slimmed down it is.
Posted: Tue Mar 27, 2007 12:20 am
by JellyFish
Umm... What should I do to start my way on CSS design?
Posted: Tue Mar 27, 2007 12:59 am
by Kieran Huggins
@pickle: lists are exactly that: lists. There's no mention of bullets except that they're styled with them by default. If you ever start manipulating the DOM for any reason you'll quickly lose your love of tables - and pure CSS design gets easier all the time.
@NSG:
http://tinyurl.com/2febpy - there are a few gotchas, but once you learn to think about forms a certain way they're quite flexible.
@JellyFish: Search for "CSS turorial",
try stuff, do the w3schools thing, maybe buy a book. We can all lead you to the CSS river, but you're the one that needs to drink.
Posted: Tue Mar 27, 2007 1:19 am
by JellyFish
Alrightythen. Thanks for all the post on this topic guys. I think I got enough information to go with.