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

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

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

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

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

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

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

EDIT: мне нужно, чтобы оба отображали данные пользователю и редактировали значения в отдельной (но близкой идентичной) форме.

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 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 я могу поменять класс формы с редактирования на просмотр.

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

Ответ 6

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

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

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

Ответ 7

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

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

HTML:

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