Что было бы лучшим способом сделать этот макет (CSS или таблицы)?

Question

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

|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| Location:   xxxxxxxxx-xxxx-xxx                 Maximum subscription date: 12-11-2009  |
| Begin date: 12-15-2009                                              Cost: $ 150       |
| Duration:   2 Days                                                                    |
| Status:     Confirmed with remaining places                           [Subscription]  |
|                                                                                       |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| Location:   xxxxxxxxx-xxxx-xxx                 Maximum subscription date: 12-12-2009  |
| Begin date: 12-15-2009                                              Cost: $ 150       |
| Duration:   2 Days                                                                    |
| Status:     Confirmed with remaining places                           [Subscription]  |
|                                                                                       |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Я думал о таблицах, но я не уверен, что это самый подходящий способ для этого.

Answer 1

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

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

Answer 2

Независимо от того, насколько я ненавижу таблицы для разметки, я должен был бы сказать таблицы.

Answer 3

Я думаю, что людям нужно преодолеть отрицательную реакцию на использование колена в их (x) html. Это допустимый набор тегов, и он очень хорошо отображает и организует «квадратные» данные. Если вы собираетесь быть категорически против них, проявите смекалку и укажите, что и все остальное не подходит для семантически неприемлемого использования . Не используйте таблицу для размещения вашего логотипа и заголовка. Это не табличные данные. Отображаете ли вы данные в виде квадрата, который показывает отношения между строками и столбцами информации? Тогда иди и используй таблицы!

Для вашего конкретного использования я бы рекомендовал, учитывая мое понимание семантической разметки (спасибо Дэн С.!), Либо таблицу, либо список определений. Это точно описывает то, что вы пытаетесь написать.

Answer 4

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

Answer 5

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

<dl>
    <dt>Location:</dt>
    <dd>xxxxxxx-xxxxx</dd>
    ....
</dl>

Это немного сложнее, но код выглядит чище ИМХО. (Для меня это нормально делать с таблицами тоже)

Answer 6

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

UL
  LI
    DIV.left
      DL
        DT LABEL {label} /LABEL /DT
        DD {detail}
      /DL
      ...
    /DIV.left

    DIV.right
      ...
    /DIV.right

    DIV.subscribe ... /DIV.subscribe
  /LI
  ...
/UL

ПРИМЕЧАНИЕ: использование метки связано с тем, что я использую похожую технику для форм ввода. Быть последовательным помогает уменьшить ненужные CSS.

.left и .right просто для плавающих, я бы хотел, чтобы позиционирование LI было относительным, и исключил бы конкретный стиль с помощью CSS и маркеров (IE делает эту часть немного PITA, поэтому DIV.list > DIV.list-item может быть лучше с точки зрения реального использования.

Answer 7

Отображение табличных данных в таблицах

Answer 8

Зависит от того, что вы хотите

Пример вашего вопроса сейчас выглядит как поле с несколькими строками текста, затем другое поле и т. Д.

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