<table> or <div>: Which is the better layout met

JavaScript and client side scripting.

Moderator: General Moderators

<table> or <div>?

<table>
0
No votes
<div>
10
100%
 
Total votes: 10

alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

I finally switched...and like everyone has said...it's much nicer once you get basics...

There are still some caveats which maybe are addressable by CSS gurus...

1) Vertcial centering
2) Faux columns - it was less hack-ish using tables
3) resizing fluid designs doesn't quite render how it did with tables - again maybe it's me

I would much rather the font, colors, background, etc to a CSS file than hand code that garbage...makes theming, etc much easier. :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

It takes getting used to. I've put more than my share of time into researching all the little CSS pitfalls and such.

1) Vertical centering is, indeed, not exactly possible through pure CSS unless you give a set top and bottom padding/margin to "fake" it. The more you do though, the less necessary it'll even seem.

2) Depending on the way you do columns in CSS, it will hardly seem "hackish" at all.

3) Tables could be automatically sized. In CSS, you define the design, not the browser.
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post by smudge »

umm, no one's answered my request yet:
smudge earlier wrote:Maybe you could point me to some exceptionally designed websites to examine the 'proper' way to design.
I understand many of the points you guys are discussing, but it would help me a lot more to see an excellent example. I'm more of a visual guy :D
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

http://www.456bereastreet.com/
http://veerle.duoh.com/

And as an example of what is possible with CSS, take a look at the csszengarden
However, the csszengarden should be seen only as an example of what can be done. Semantically, the HTML is not very good. That is a consequence of the fact that the project was started at a time that css wasn't used at all and for the goal of the project a lot of extra, nonsemantic html "hooks" were added.

For my own site(s) I now have done a few redesigns/re-aligns, and almost haven't had to touch my HTML at all. Just take the css file, start changing the rules. That is one example of when a solid foundation pays off.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Here's a test for you all that I am in the midst of testing...

Download several screen reading browsers. Install them. As you test your markup in several browsers, fire up the screen reader, turn your monitor off and test your site.

Semantic and accessible markup are harder to achieve than most think. If you don't believe it, try it, and see how the markup you are using to develop sites affects those with disabilities that would like to use your site.
Post Reply