divs do not a table make

People please... if you ever write this code:
Just use a table...
Posted by Daniel Short on Feb 16, 2009 at 10:10 AM | Categories: ColdFusion - Rambling -

13 Comments

Ben Nadel

Ben Nadel wrote on 02/16/09 11:06 AM

Word up :)
Dan G. Switzer, II

Dan G. Switzer, II wrote on 02/16/09 11:13 AM

While you should use the appropriate markup for the task, I do use the
quite a bit in my markup. Now, I never use it when I'm laying out tabular data--that's what the is for. I do use it when laying out labels and forms though. It gives a lot of flexibility for CSS layout. I can use something like:
Dan
Using just CSS I can change how this is laid out. I could lay it out as: Name: Dan or Name: Dan This technique works really well if you need multiple formatting options on the same markup--such as laying out some element for a desktop as opposed to mobile device. So, while you should use the table tag for laying out tabular data, not all things that are broken into "rows" of data are really tabular in structure.
Daniel Short

Daniel Short wrote on 02/16/09 11:21 AM

Caveat duly noted :-D
Daniel Short

Daniel Short wrote on 02/16/09 11:24 AM

Although now I think about it, I'd probably use a definition list to do what you're talking about there...
First Name
Dan
Last Name
Short
Dan G. Switzer, II

Dan G. Switzer, II wrote on 02/16/09 11:47 AM

I was just giving a simple example. A definition list would work fine for a label/value pair, but I do prefer using the label tag when form fields are involved.
Daniel Short

Daniel Short wrote on 02/16/09 11:52 AM

Agreed, the label tag and I have a very good relationship :).
Dan Vega

Dan Vega wrote on 02/17/09 2:54 PM

CSS Layouts FTW! I am not the greatest CSS guy around but thankfully there are some great frameworks out like blueprint, 960Grid and others. These frameworks make css layouts easy and cross browser compatible.
Daniel Short

Daniel Short wrote on 02/17/09 2:58 PM

I agree, when it's appropriate :). I hadn't seen 960grid, so I'm going to have to check that one out. But my post was specifically around trying to create a table display by using divs. Tables are valid when you're trying to display tabular data (and look awesomely fantastic when styled with copious CSS), so don't try to shoehorn that tabular data into a bunch of floated divs in order to get a "table-like" display.
Dan Vega

Dan Vega wrote on 02/17/09 3:55 PM

I got ya, I just wanted to throw my "CSS Layouts FTW" out there! ha.. Thanks.
Andres Cayon

Andres Cayon wrote on 02/17/09 5:11 PM

Thanksfully, HTML tags are more semantic every day (and wait for HTML 5): Are you displaying tabular data? Use a table Are you creating a list of definition terms and descriptions? use dl Are you adding a list of links? use ul (or get ready for the html 5 nav tag) Is it that hard to understand? some people have taken the "don't use tables" sentence too seriously... What's next? div class="table-header"?
Daniel Short

Daniel Short wrote on 02/18/09 8:11 AM

Unfortunately yes :). The code I was working on had exactly that...
Andres Cayon

Andres Cayon wrote on 02/18/09 5:53 PM

At least, they've been semantic, Dan. LOL
Rob Wilkerson

Rob Wilkerson wrote on 02/21/09 6:54 AM

Related: div class="heading". Oh yeah. I've seen it with my own two eyes. :-)