HTML Бестабличная форма

Question

У меня есть раздел html-страницы, который я хочу отобразить в виде таблицы.Я продолжаю слышать, чтобы не использовать <table> для макета.И я получаю общие рассуждения.

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

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

3. вероятно, множество других причин.

Я склоняюсь к "не используйте таблицы в качестве метода компоновки по умолчанию, но если это имеет смысл, просто сделайте это"

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

<table>
  <tr>
    <td>First Name</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>Phone Number</td>
    <td><input type="text"/></td>
  </tr>
</table>

Итак, я хочу, чтобы все input s располагались вертикально, что означает, что первый «столбец» должен растягиваться до самой широкой ширины всех «строк» ​​

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

Я прочитал довольно много страниц, на которых говорится, насколько злой <table> для макета, я согласен с некоторыми моментами, но я думаю,добавление набора элементов div для имитации таблицы также глупо.Под этим я подразумеваю, что иметь серию div с классом clear:left в нем сложнее для чтения.

В любом случае, я действительно хотел бы "увидеть свет".

ОБНОВЛЕНИЕ:

В ответ на ответы я думаю, что лучшая реализация для меня будет такой:

css (что в основном требует, чтобы я указывал только класс на самом верхнем div):

div.table
{
    display:table
}

div.table div
{
    display:table-row
}

div.table div div
{
    padding:5px;
    display:table-cell;
}

, а затем добавьте следующую разметку:

<div class="table">
  <div>
    <div>First Name</div>
    <div><input type="text"/></div>
  </div>
  <div>
    <div>Last Name</div>
    <div><input type="text"/></div>
  </div>
  <div>
    <div>Phone Number</div>
    <div><input type="text"/></div>
  </div>
</div>

Answer 1

У List Apart есть хорошая статья по этому вопросу.

Они используют

• <ul></li>
• <Fieldset> и
• <label>

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

Answer 2

Если вы хотите точную компоновку таблицы, используйте «display: table» и тому подобное.Отбросьте запасной вариант для более старых версий IE, и вы получите лучшее из обоих миров.

В качестве альтернативы - это то, что я бы сделал, - вы можете использовать метки фиксированной ширины и плавающие.Очень широкая метка просто переносится на следующую строку.

Answer 3

Общее правило - использовать таблицу только для табличных данных, и вы можете разумно сказать, что это табличные данные, поэтому я не думаю, что это проблема.Даже Head First HTML / CSS книга так говорит!