Lil Regie's front-end workshop


Name/Value pair list

Sometimes you’ll need to display keys and their values. This list arranges each pair.

Example

0 375 640 768 1024

Open in a new window

Code sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<dl class="list_name_value_pairs">
  <div>  
    <dt>
      Australia
    </dt>
    <dd>
      <abbr title="Australian Dollars">AUD</abbr> 19.95
    </dd>
  </div>
  <div>
    <dt>
      Austria
    </dt>
    <dd>
      <abbr title="Euros">EUR</abbr> 14.95
    </dd>
  </div>
  <div>
    <dt>
      Belgium
    </dt>
    <dd>
      <abbr title="Euros">EUR</abbr> 14.95
    </dd>
  </div>
  <div>
    <dt>
      Democratic Republic of Sao Tome and Principe
    </dt>
    <dd>
      <abbr title="United States Dollars">USD</abbr> 15.95
    </dd>
  </div>
  <div>
    <dt>
      South Africa
    </dt>
    <dd>
      <abbr title="South African Rands">ZAR</abbr> 169.95
    </dd>
  </div>
</dl>

Usage notes

  • Use a <div> to group each pair of key and value.

Source files