Sell me on CSS-Layouts.
Moderator: General Moderators
Sell me on CSS-Layouts.
Why is CSS-Layouts so great?
Why do, if you do, prefer CSS over Table layouts?
What's is wrong with tables?
Why do, if you do, prefer CSS over Table layouts?
What's is wrong with tables?
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
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!
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!
I'm not saying not to use CSS. I'm just wondering why you need:
over:
???
I don't know if this is how you do it but I'm sure I've seen this done somewhere.
Code: Select all
<div class="table">
<div class="tr">
<div class="td">
</div>
</div>
</div>
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.
How else could you lay out content aligned to the left and content aligned to the right both aligned vertically with each other?
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.
Code: Select all
<table>
<tr>
<td>
Content aligned to the left
</td>
<td>
Content aligned to the right.
</td>
</tr>
</table>
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.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
I know - phpBB2 uses tables for layout... (I wondered when that argument would pop up)
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.
Code: Select all
<div class="table">
<div class="tr">
<div class="td">
</div>
</div>
</div> 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.
And what's that?The Ninja Space Goat wrote:css layouts allow you to do MORE than tables did.
I think I got it down... What more is there to it? Selector, property and value.and READ about CSS.
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?
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.
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.
@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.
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.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
@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.
@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.