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.

Can you explain what kind of page that is? E.g. is it a form, or do you have data which needs to be displayed in a "table"? ;) — Till
– Till, Commented Sep 14, 2008 at 14:18
The main title is misleading, it would be good if someone could edit to reflect the fact that IainMH was talking about the layout of form fields. — andyuk
– andyuk, Commented Sep 14, 2008 at 22:13

macbirdie · Accepted Answer · 2008-09-14 14:25:14Z

54

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?

edited Sep 14, 2008 at 14:25

answered Sep 14, 2008 at 14:17

macbirdie

16.2k6 gold badges50 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fire Lancer Over a year ago

The will indent the value, and make it on a new line Name Value

Espo Over a year ago

That depends on the stylesheet. Take a look at the link in my answer and see for yourself.

macbirdie Over a year ago

Like Espo said, definition lists can be styled in any way you want. You can easily override the default newline/indentation styling.

Nacht Over a year ago

I think your answer would benefit greatly from adding the CSS to make it look like a table.

Ritu · Accepted Answer · 2020-08-28 09:15:02Z

10

Horizontal definition lists work pretty well, i.e.

<dl class="dl-horizontal">
  <dt>ID</dt>
  <dd>25</dd>
  <dt>Username</dt>
  <dd>Bob</dd>
</dl>

The dl-horizontal class is provided by the Bootstrap CSS framework.

From Bootstrap4:

<dl class="row">
  <dt class="col">ID</dt>
  <dd class="col">25</dd>
</dl>
<dl class="row">
  <dt class="col">Username</dt>
  <dd class="col">Bob</dd>
</dl>

edited Aug 28, 2020 at 9:15

Ritu

7326 silver badges15 bronze badges

answered Sep 14, 2016 at 10:17

Dónal

188k177 gold badges590 silver badges851 bronze badges

3 Comments

Alex Beynenson Over a year ago

This works nicely if you have the bootstrap CSS framework.

mumair Over a year ago

Just an update dl-horizontal is dropped in bootstrap 4; but there is an alternative (getbootstrap.com/docs/4.0/migration/#typography)

Joao Costa Over a year ago

Also multiple dl elements are not necessary, see getbootstrap.com/docs/5.2/content/typography/… for an example.

rtack · Accepted Answer · 2016-06-10 14:18:16Z

6

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/

edited Jun 10, 2016 at 14:18

rtack

1833 silver badges10 bronze badges

answered Sep 14, 2008 at 14:16

Espo

42.1k21 gold badges139 silver badges160 bronze badges

Comments

erlando · Accepted Answer · 2008-09-14 14:31:51Z

5

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

answered Sep 14, 2008 at 14:31

erlando

6,7664 gold badges26 silver badges29 bronze badges

1 Comment

Iain Holder Over a year ago

But it sort of isn't a table. In ASP.NET webforms, I suppose it could be the difference between GridView and DetailsView.

Allain Lalonde · Accepted Answer · 2008-09-14 14:36:19Z

2

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.

answered Sep 14, 2008 at 14:36

Allain Lalonde

94k72 gold badges190 silver badges239 bronze badges

Comments

derek lawless · Accepted Answer · 2020-05-11 22:03:11Z

2

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.

edited May 11, 2020 at 22:03

answered Sep 15, 2008 at 13:08

derek lawless

2,5642 gold badges16 silver badges13 bronze badges

Comments

thanksd · Accepted Answer · 2016-01-14 20:30:09Z

-2

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>

edited Jan 14, 2016 at 20:30

thanksd

55.9k23 gold badges167 silver badges155 bronze badges

answered Sep 14, 2008 at 14:21

Fire Lancer

30.3k34 gold badges125 silver badges186 bronze badges

1 Comment

Chris Walsh Over a year ago

This approach contains poor accessibility as name/values are not together. Also a problem if word wrapping occurs as names and values will become out of alignment.

Collectives™ on Stack Overflow

Using CSS how best to display name value pairs?

7 Answers 7

4 Comments

3 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

3 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related