Using CSS how best to display name value pairs?

IainMH_1122 0
Viewed 35892

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.

css html
7 Answers
macbirdie_50490

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://maxdesign.com.au/articles/definition/

user_22570

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

erlando_41920

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.

Allain_Lalonde_24430

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 explanation of the label tag @ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label - 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.

Derek_Lawless_4004640

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>
Fire_Lancer_62660
Related