Используя CSS, как лучше всего отображать пары имя-значение?

Question

Должен ли я все равно использовать таблицы?

Код таблицы, который я заменяю:

<table>
    <tr>
        <td>Name</td><td>Value</td>
    </tr>
    ...
</table>

Из того, что я читал, у меня должно быть что-то вроде

<label class="name">Name</label><label class="value">Value</value><br />
...

Идеи и ссылки на онлайн образцы с благодарностью. Я разработчик, выходящий из глубины моего дизайна.

РЕДАКТИРОВАТЬ: Мне нужно, чтобы у меня была возможность отображать данные пользователю и редактировать значения в отдельной (но почти идентичной) форме.

Answer 1

Я думаю, что списки определений семантически близки к парам имя / значение.

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

Списки определений - неправильно или неправильно понято?

Answer 2

Горизонтальные списки определений работают довольно хорошо, т.е.

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

      <dt>Username</dt>
      <dd>Bob</dd>
    </dl>

Класс dl-horizontal предоставляется платформой Bootstrap CSS.

Answer 3

Я думаю, что таблицы лучше всего использовать для табличных данных, которые, похоже, у вас есть.

Если вы не хотите использовать таблицы, лучше всего использовать списки определений (<dl> and <dt>). Вот как их стиль должен выглядеть как ваш старый <td> макет. http://maxdesign.com.au/articles/definition/

Answer 4

Совершенно разумно использовать таблицы для табличных данных.

Answer 5

Если я пишу форму, я обычно использую это:

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

Тогда в моем css:

.editing .view, .viewing .edit { display: none }
.editing .edit, .editing .view { display: inline }

Затем с помощью небольшого JavaScript я могу поменять класс формы с редактирования на просмотр.

Я упоминаю этот подход, поскольку вы хотели отображать и редактировать данные с почти одинаковым расположением, и это способ сделать это.

Answer 6

Как и macbirdie, я был бы склонен пометить такие данные как список определений, если только содержание существующей таблицы не может быть оценено как как табличное содержимое.

Я бы не стал использовать тег метки так, как вы предлагаете. Посмотрите на объяснение тега label @ http://www.w3schools.com/tags/tag_label.asp - он действительно предназначен для того, чтобы позволить вам сосредоточиться на связанном с ним элементе управления. Также избегайте использования общих элементов div и span, поскольку с семантической точки зрения они слабые.

Если вы отображаете несколько пар имя-значение на одном экране, но редактируете только одну на экране редактирования, я бы использовал таблицу на первом экране и список определений на последнем.

Answer 7

используйте свойство float: например: CSS:

.left {
  float:left;
  padding-right:20px
}

HTML:

<div class="left">
 Name<br/>
 AnotherName
</div>
<div>
 Value<br />
 AnotherValue
</div>