Is tableless layout any good?

I have read around, found quite a few articles about using divs to build a tableless layout, so I decided to give it a try. Everything was really smooth, until I wanted to align text inside a div vertically. I have asked here at DP, searched for the solutions everywhere, yet the only one way to make it really work is to use some css hacks (Which I don't like).

So my point is, without using any kind of css/browser hacks, is tableless layout possible at all? How are we supposed to align the dynamic content (Line height and such won't work, they are not for dynamic websites) vertically inside div tags?

 

Yeah tables have their own special place in web design. Anyone refusing to use tables at all in special cases, in my opinion is not a smart person.

But for most of the time, DIVs work better when paired with CSS. And no you don't have to use a 'browser hack' to align content vertically inside a DIV based column.

For your specific requirement, though i never had such a case, i googled and found something useful.

See these

http://phrogz.net/CSS/vertical-align/index.html

and

http://www.webtoolkit.info/css-vertical-align.html

That means the DIV which you want to have dynamic content aligned vertically, apply these 2 CSS rules

div.class { display:table-cell; vertical-align:middle; }

Demo page here. - http://www.webtoolkit.info/css-vertical-align.html . Works in IE6 also.


You know this, all those snazzy, peppy web interfaces these days called web 2.0, not possible with huge contribution from CSS, right? So you don't hesitate to use CSS, its better, trust me

And thanks for asking this question, i learned this myself today only

 

There are some things pureCSS layouts cannot do - you just found one of them.

I'm a fairly big advocate of moving away from tables for layout since 'not every element needs ten tables wrapping it' - but at the same time there are some things tables can do that div still cannot without tons of hacks or headaches.

Vertical alignment is one of those things - even the example markupdude linked to is filled with problems, not the least of which being you usually want your vertical alignment to be relative to a second column of dynamic height data, in which case it just won't cut the mustard.

So yeah, I say go ahead and use a table, but do so in a sensible manner.... sensible means there are only THREE presentational attributes I consider allowable, and five attributes TOTAL.

cellspacing - MOST of the time you should use the CSS attribute 'border-spacing', but in a handful of cases IE will screw up border precidence if you aren't using border-collapse:collapse; - so if you want cellspacing, best to still use this.

colspan/rowspan - you can't state this in CSS.

That's the three presentationals, the two non-presentational attributes I would 'allow' in my markup are class and ID - apart from that there is NO REASON to use any other attributes.

for example:

<table cellpadding="0" cellspacing="0" border="0">

made of /FAIL/

<table class="fixed">

much better. the equivalent CSS for setting all of the above to zero is pretty easy...

.fixed {
border-collapse:collapse;
}

Everything old school table designers did in their markup can be done in the CSS, quickly stripping table code down to as lean as any other 'modern' markup technique - leaner in many cases because tables have built in the behaviors many of your die-hard anti-table mafioso zealots will spend hours fiddling with and throwing tons of hacks and obscure browser quirks at to try and implement.

Seriously, I'd like to see someone pull off center column code first 100% min-height cross-browser compatable back to IE 5.0 in less code without hacks than this table layout does:
http://battletech.hopto.org/html_tutorials/3coltable.html

Doesn't exist though - you have to hack just to get the min-height out of IE, and faux columns combined with 'stupid margin tricks' will be more code.

The real 'problem' was not using tables for layout, despite all the wild claims - the problem was people wrapping everything in a table whether it needed it or not, or wrapping table inside a table inside a table... When these people hopped on the anti-table bandwagon they just started churning out crap div with a class inside a div with a class inside a div with a class - net change zero.

... and LEARN to use a table properly. I see page after page where you see:

<td class="header">

Whiskey tango foxtrot? That's what a TH is FOR!!! Even bigger /fail/ is when you see code like this:

<td class="header"><b><font face="arial">Subject</font></b></td>

where every TD in that TR has the same class and wrapping markup... my markup for that would probably be:

<th>Subject</th>

with EVERYTHING else there stated once in the CSS. That's what CSS is FOR. I think it's shortsighted and stupid to even bother teaching presentational markup anymore.

 

CSS div position is my solution for tableless design.

I position the div using top, left, right or bottom. I have successfully made it and its way far more flexible than using tables.

 

Can't agree more.

Also i did not know border-collapse:collapse; resets them all, i earlier though it only removes the spacing between TDs. Thanks for that.

 

css layout is much better
I think...

 

Of course CSS based layout is better, and i might be misunderstanding it, but do u guys [ @cipals15 & @LaWoure ] actually mean not to use tables at all?

No offence, i prefer working with DIVs plus CSS, but still we are better off using tables in many specific cases. Agree with me?

 

yes MD you are right...

my layout consists of:
80% css divs
20% tables

 

I've had a difficult time making the transition from tables to css since I've been "in the game" for quite a few years now. Since the beginning, actually. (Does that make me old?)

And what I've found from talking with many designers is that once you embrace css, there simply is no going back. You might have some problems in the beginning, but ask yourself if that certain layout trick or alignment problem is ABSOLUTELY necessary to the design. Most likely, the answer will be no.

What has happened is that designers tend to design to the constraints of the medium. Did DaVinci do bevels and drop-shadows? Was <table border="10"> EVER a good look? The same is happening with css, but since css is a more advanced concept which mirrors print design better, it doesn't pain the eyeballs so much.

So my advice is to have a look around the web and find some sites that you like and take a peek at their code. You'll find that you can do so much more with css than tables. Although tables DO have their place in displaying tabular data. CSS just can't hack it.

Oh yea, and as for css hacks. They are slowly going away now that IE6 is becoming a thing of the past. There will always be hacks. But again, ask yourself, do you REALLY need that certain special something in your design. I'll bet all the fuzz in my pockets that the answer is "no".

 

Tableless layout is the trend and at least a symbol of web2.0 .
Tableless layout actually means "div+css layout" at present .
Its advantage is it seperate the content and the style . The pages load fast and the many code are more reusable .

 

I go along with justin in that...

 

Css layout is better than table layout. Yes have some bads, but table layout cant be more useful. Vertical align is problem, could by solved if you know height of inner content, then you just set proper padding or margin.

 

If you work with tables it is easier to optimize your site for all browsers but if you work with layout of css/divs its more difficult to optimize it... I think

 

Some really nice handy infos here mates.
i think it would be really helpful for me at least, as im getting into magic of CSS.

 

When I was beginning with CSS I first was very surprised because it was very difficult to learn it.... but I copied some css codes, tried to rewrite it and I saw what changed Now I think its very easy and I am glad that I already know CSS language

 

Tables for layout is stupid and the original complaint is nonsense. Vertical alignment is possible inside a div element is entirely possible. Tables give you the added disadvantage of a fixed grid you are restricted to.

If you think you need tables to do ANY kind of layout (other than its intended purpose) then you don't know CSS.

 

If you cant decide between tables or css so choose css because its the best way
But probably best combination how to make any layout is using both of tables and css...

 

@LaWoure , yes as we agreed before, it is the best of both the worlds [DIVs+, tables in specific cases] that help run the show smoothly

 

I generally use css everywhere that doesnt require a visible table. My rule is that if you can't see the table, you can do it in css. I just make spreadsheets, etc with tables and do all the rest in css.

 

I literally never use tables.

The reason why, I don't ever have need to put content in a table. Tales for layout is flawed on these levels.

CSS can do more with divs than you can do with tables.

CSS is external, all sites linking to it will change when you change the CSS, if it's done in tables you'd have t go back and edit every single page to make a layout change

CSS can be more flexible, tables are often just nasty and don't show up well on very big or very tiny screens.

If you're not designing with CSS you're not designing for the web, you're designing for 1996