Какой хороший способ справиться с этим простым примером в CSS?

Question

Допустим, у меня есть следующая раскладка на некоторых страницах:

               Title: Some Title   
              Author: Some Author   
Author Date of Birth: Date of birth

Примечания:

• Текст слева выровнен и выделен жирным шрифтом.
• Используется на нескольких разных страницах.
• Правая сторона может содержать элементы управления вводом в некоторой точке.

Какой метод наиболее подходит для применения в этой ситуации? Я могу придумать несколько вариантов (предположим, что CSS применяется во внешней таблице стилей):

Таблица

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

<table>
 <tr>
  <td>Title</td>
  <td>Some Title</td>
 </tr>
</table>

Div + Classes

Мне кажется, что это случай дивитита и классициста, объединенных в один.

<div class="information">
 <div class="title">Title</div><div class="value">Some Title</div>
</div>

Контейнер Div

Это похоже на правильный путь, но я не уверен.

<div class="information">
 <strong>Title</strong> <span>Some Title</span>
</div>

Предложения

Answer 1

Я думаю, что хорошим семантическим выбором здесь является элемент dl (список описания).

http://developers.whatwg.org/grouping-content.html#the-dl-element

<dl>
    <dt>Title</dt>
    <dd>Some Title</dd>

    <dt>Author</dt>
    <dd>Some Author</dd>

    <dt>Author Date of Birth</dt>
    <dd>Date of birth</dd>
</dl>

Answer 2

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

Затем примените класс к каждому первому столбцу и в css сделайте для этого класса text-align: right;, который применяется к этому столбцу.

Answer 3

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

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

Answer 4

Это хороший пример того, когда использовать таблицы.

Это табличные данные.

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

Я даже думаю, что th s выделены жирным шрифтом по умолчанию.Не уверен во всех браузерах, хотя, чтобы быть уверенным, не мешало бы оформить их жирным шрифтом:).

Answer 5

Список определений будет семантически правильным.

  <dl>
     <dt>Title:</dt>
     <dd>Some Title<dd>

     <dt>Author:</dt>
     <dd>Some Author</dd>

     <dt>Author Date of Birth:</dt>
     <dd>Date of birth</dd>
  </dl>

Подробнее см. W3C - http://www.w3schools.com/tags/tag_dl.asp

Answer 6

Таблица - это способ размещения данных в строках и столбцах.

И это то, что вы делаете.