Sell me on CSS-Layouts.

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Sell me on CSS-Layouts.

Post by JellyFish »

Why is CSS-Layouts so great?

Why do, if you do, prefer CSS over Table layouts?

What's is wrong with tables?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

This one site can explain all of this for you...

http://www.csszengarden.com
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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!
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Umm... What should I do to start my way on CSS design?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Alrightythen. Thanks for all the post on this topic guys. I think I got enough information to go with.
Post Reply