Using CSS how best to display name value pairs?

Question

Should I still be using tables anyway?

The table code I'd be replacing is:

<table>
    <tr>
        <td>Name</td><td>Value</td>
    </tr>
    ...
</table>

From what I've been reading I should have something like

<label class="name">Name</label><label class="value">Value</value><br />
...

Ideas and links to online samples greatly appreciated. I'm a developer way out of my design depth.

EDIT: My need is to be able to both to display the data to a user and edit the values in a separate (but near identical) form.

Answer 1

I think tables are best used for tabular data, which it seems you have there.

If you do not want to use tables, the best thing would be to use definition lists(<dl> and <dt>). Here is how to style them to look like your old <td> layout.

http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm

Answer 2

Check out this article: Tableless forms.

Answer 3

I think that definition lists are pretty close semantically to name/value pairs.

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

Definition lists - misused or misunderstood?

Answer 4

use the float: property eg: css:

  .left
  {
  float:left;
  padding-right:20px
  }

html:

<div class="left">
 Name<br/>
 AnotherName
</div>
<div>
 Value<br />
 AnotherValue
</div>

Answer 5

It's perfectly reasonable to use tables for what seems to be tabular data.

Answer 6

If I'm writing a form I usually use this:

<form ... class="editing">
    <div class="field">
        <label>Label</label>
        <span class="edit"><input type="text" value="Value" ... /></span>
        <span class="view">Value</span>
    </div>
    ...
</form>

Then in my css:

.editing .view, .viewing .edit { display: none }
.editing .edit, .editing .view { display: inline }

Then with a little JavaScript I can swap the class of the form from editing to viewing.

I mention this approach since you wanted to display and edit the data with nearly the same layout and this is a way of doing it.

Answer 7

Like macbirdie I'd be inclined to mark data like this up as a definition list unless the content of the existing table could be judged to actually be tabular content.

I'd avoid using the label tag in the way you propose. Take a look at explaination of the label tag @ http://www.w3schools.com/tags/tag_label.asp - it's really intended to allow you to focus on its associated control. Also avoid using generic divs and spans as from a semantic point of view they're weak.

If you're display multiple name-value pairs on one screen, but editing only one on an edit screen, I'd use a table on the former screen, and a definition list on the latter.