Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using CSS how best to display name value pairs?

Tags:

html

css

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.

like image 480
Iain Holder Avatar asked Sep 14 '08 14:09

Iain Holder


People also ask

Which list are name value pairs in HTML?

Name-value pairs are represented by a set of text strings in which name="value" are usually separated by commas, semicolons, space or newline character.

What is a CSS property and value pair?

A property and value pair is called a declaration, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it. Both properties and values are case-insensitive by default in CSS.

What are name value pairs in a form?

A name–value pair, also called an attribute–value pair, key–value pair, or field–value pair, is a fundamental data representation in computing systems and applications. Designers often desire an open-ended data structure that allows for future extension without modifying existing code or data.


2 Answers

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?

like image 196
macbirdie Avatar answered Oct 11 '22 21:10

macbirdie


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> 
like image 31
Dónal Avatar answered Oct 11 '22 21:10

Dónal