8

I was inspired to ask this by a comment on my How can I style a list of name-value pairs to appear like an HTML table? question last night, that code like this is not an appropriate use of label. What should I rather use to indicate a fixed-name / changing-value pair in read only mode?

<ol class="name-value" style="width: 100%;">
    <li>                    
        <label for="about">Client</label>
        <span id="about">Apartment Applied Visual Arts</span>
    </li>
    <li>
        <label for="about">Report Date</label>
        <span id="Span1">2011/08/08 16:50:10</span>
    </li>
    <li>
        <label for="about">Report No.</label>
        <span id="Span2">33251</span>
    </li>
</ol>
Community
  • 1
  • 1
ProfK
  • 49,207
  • 121
  • 399
  • 775
  • 1
    @Merlyn, are you joking? – ProfK Aug 09 '11 at 05:45
  • Nope. Not everyone browsing your questions will even know why you'd want to turn tabular data into a list, when a table seems "obvious". Not being a front-end dev (or even remembering what the table element looks like), I fall into that group. – Merlyn Morgan-Graham Aug 09 '11 at 05:51
  • 1
    @Merlyn, maybe I should have included a précis of the question I linked to, but tabular data is where rows are repeated zero or more times, with the same attributes (columns) in each row. When there is always only one row, we shouldn't be using a table. – ProfK Aug 09 '11 at 07:51
  • I meant a rotation of what you're describing, so it becomes more or less a key-value pair table. But I can agree with your assessment - if this were a table, the columns really shouldn't be "label" and "value", but should have a column for each label you have, in which case you'd end up with just one row. – Merlyn Morgan-Graham Aug 09 '11 at 18:37

1 Answers1

41

I use definition lists:

<dl>
    <dt>Key</dt>
    <dd>Value</dd>
    <dt>Another key</dt>
    <dd>Another value</dd>
</dl>
icktoofay
  • 126,289
  • 21
  • 250
  • 231
  • Wish I could upvote this more than once. Too many web devs don't use these! – OverZealous Aug 09 '11 at 05:27
  • Agreed. Should be a nice answer, eventually, at least. – Ray Toal Aug 09 '11 at 05:29
  • I first experimented with definition lists, but I chose an ordered list because I get a block type container for each list item. Definition lists are quite hard to style for tabular display. You have my vote anyway. – ProfK Aug 09 '11 at 05:42
  • 2
    @ProfK: Really? I've had quite a lot of success styling definition lists for name/value data. (Example: http://jsfiddle.net/cfYB9/) – icktoofay Aug 09 '11 at 05:45
  • @icktoofay, I don't know what I was doing wrong, but I'm back to using definition lists, thanks. – ProfK Aug 09 '11 at 07:06
  • @ProfK I've been back and forth on them myself. As you've described, the lack of container for the pairs is difficult to work around. I've just posted a question too: http://stackoverflow.com/questions/20982759/replacement-for-the-doa-di-tag – Dan Lugg Jan 07 '14 at 22:52