Should this be in a table or a div or other?

Question

Ok, I'm not trying to put fuel on the table/div debate, for this project I've already decided that I want to use divs for everything that's not tabular, so far it is working out well.

I have one spot where I need to display name value pairs, so on the left I display the name (label) and on the right I display a value. It's not necessarily tabular data or at least how I think of tabular data, because I imagine tabular data where the labels are displayed horizontally at the top, and the values are below in rows.

But I've tried to display this in divs and am having some issue. I have 2 divs with float:left. for each label i have a div inside the left most parent div. for each value i ave a corresponding div inside the rightmost parent div. This would normally be ok, but if the value div is empty the div shrinks and the label divs and value divs stop aligning to each other vertically. Same if I use spans, or even ul/li (list-style-type:none) elements. The only one that seems to work easily is a table. I don't want to explicitely set hights on the divs because I think that's a cop-out, and the required hight could change if I change the font. Given that I'm trying to go with the "divs for non tabular data" approach, would I be breaking my own rules by using a table?

Answer 1

I am a CSS layout zealot and "name value pairs" sounds exactly like tabular data to me.

Answer 2

IMHO, I think you'll be easier off with a table. Because you don't want to set the div with explicitly.

Answer 3

What you have is two-column tabular data without column headers. Use a table. :)

Answer 4

This sure sounds like a semantically valid use case for table. The only alternative I can think of is a definition list. As both seems to convey the semantics of a key/value pairs, you might as well go with the one that makes it easier for you to get the desired graphical design :-)

---

Table (using one<th> and one <td> per row)

<table>
    <tr>
        <th>Foo</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
    <tr>
        <th>Bar</th>
        <td>Etiam varius volutpat sem sed porta.</td>
    </tr>
</table>

Definition list

<dl>
    <dt>Foo</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Bar</dt>
    <dd>Etiam varius volutpat sem sed porta.</dd>
</dl>

Answer 5

An aforementioned alternate to tables would be a definition list, where your label is the dt (data term), and the field is the dd (data definition)

However, when I attended An Event Apart (front end gurus and web standards aficionados), I watched Eric Meyer, CSS Master, put a form together using a :gasp: table. Like the others said, it can be viewed as tabular data.

I asked him, how now, do you sometimes use dl, sometimes table for this?

He replies, it is very much personal preference. My notes from his talk say

The "Book a Trip" section should really be a table - arguably, it is a data form where your data has yet to be filled in by the user. This begs the question, are all forms tables? Why does Eric use tables over dls or whatever? The semantics are a very subjective thing. He does whatever is most pain-free, so sometimes OL, sometimes DL, sometimes a table.