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

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

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

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

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

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

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

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

html:

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

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

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

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

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

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

Я бы не стал использовать тег label так, как вы предлагаете. Взгляните на объяснение тега метки @ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label - он действительно предназначен для того, чтобы вы могли сосредоточиться на связанном с ним элементе управления. Также избегайте использования общих div и span, поскольку с семантической точки зрения они слабые.

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

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

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

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

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