Должно ли это быть в таблице или div или другом?

Question

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

У меня есть одно место, где мне нужно отобразить пары имя-значение, поэтому слева я отображаю имя (метку), а справа я отображаю значение.Это не обязательно табличные данные или, по крайней мере, то, как я думаю о табличных данных, потому что я представляю табличные данные, где метки отображаются горизонтально вверху, а значения находятся ниже в строках.

Но я пыталсяотобразить это в divs и у меня возникли проблемы.У меня есть 2 деления с плавающей точкой: слева.для каждой метки у меня есть div внутри самого левого родительского div.для каждого значения у меня есть соответствующий div внутри самого правого родительского div.Обычно это будет нормально, но если значение div пустое, div уменьшается, а метки div и значения div перестают выравниваться по вертикали.То же самое, если я использую span, или даже элементы ul / li (list-style-type: none).Единственное, что, кажется, работает легко - это стол.Я не хочу явно устанавливать высокие значения для div, потому что я думаю, что это отговорка, и требуемая высота может измениться, если я изменю шрифт.Учитывая, что я пытаюсь использовать подход "divs для не табличных данных", буду ли я нарушать свои собственные правила, используя таблицу?

Answer 1

Я фанат CSS-разметки, и "пары имя-значение" звучат для меня в точности как табличные данные.

Answer 2

Это звучит как семантически верный вариант использования таблицы. Единственная альтернатива, которую я могу придумать, это список определений. Поскольку оба, кажется, передают семантику пар ключ / значение, вы можете также пойти на тот, который упрощает получение желаемого графического дизайна:

---

Таблица (используется один <th> и один <td> на строку)

<table>
    <tr>
        <th>Foo</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
    <tr>
        <th>Bar</th>
        <td>Etiam varius volutpat sem sed porta.</td>
    </tr>
</table>

Список определений

<dl>
    <dt>Foo</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Bar</dt>
    <dd>Etiam varius volutpat sem sed porta.</dd>
</dl>

Answer 3

Вышеупомянутой альтернативой таблицам будет список определений, где ваша метка - dt (термин данных), а поле - dd (определение данных)

Однако, когда я посетил An Event Apart (гуру интерфейса и поклонники веб-стандартов), я наблюдал, как Эрик Мейер, мастер CSS, собирал форму, используя: gasp: table. Как и другие, это можно рассматривать как табличные данные.

Я спросил его, как теперь, вы иногда используете dl, иногда таблицу для этого?

Он отвечает, это очень личное предпочтение. Мои заметки из его выступления говорят

Раздел "Забронировать поездку" должен действительно быть таблицей - возможно, это форма данных, где ваши данные еще не заполняется пользователем. Это напрашивается вопрос, все ли таблицы форм? Почему Эрик использует таблицы над dls или без разницы? Семантика очень субъективная вещь. Он делает все, что есть наиболее безболезненно, поэтому иногда ПР, иногда DL, иногда стол.

Answer 4

То, что у вас есть, это двухколонные табличные данные без заголовков столбцов. Используйте таблицу. :)

Answer 5

ИМХО, думаю, вам будет легче со столом. Потому что вы не хотите устанавливать div с явно.