Лучшая практика: Таблица, Див, Список или какая-то комбинация ...?

Question

У меня есть простой набор данных, содержащий менее 100 строк.В настоящее время я отображаю данные в серии вложенных DIV.В каждой строке есть контейнер div, в котором вложенные div представляют столбцы данных внутри него.(Это было в реакции с моих самых ранних дней кодирования, когда не было ничего похожего на div).

Первый столбец данных отформатирован как ссылка на изображение, а два других столбца - текст.

Имеет ли смысл вернуться к использованию таблицы?

Кроме того, в качестве эксперимента я подумал об использовании гнезд UL.UL, содержащий все строки, и отдельный горизонтальный UL для каждой строки.

В качестве дополнительного примечания / вопроса у меня есть еще один блок данных, который может привести к тысячам строк.Приведет ли такой объем данных к другому ответу на «наилучшую практику» в этом случае?

Answer 1

Реально, вы можете использовать любой контейнер, какой захотите.Лучшая практика - использовать элементы для того, для чего они предназначены.Если вы отображаете табличные данные, во что бы то ни стало используйте таблицу!Существуют отличные плагины, которые делают работу с пользователем более удобной, и ее действительно легко читать и копировать / вставлять.

Вопрос, который я всегда задаю себе, заключается в том, будут ли эти данные лучше всего отображаться в файле Word или Excel.Если Excel, то это таблица.Если Word, это div.

Если вы используете тысячи строк, вы, вероятно, захотите предоставить пользователю контроль над сортировкой, фильтрацией и извлечением дополнительной информации для удобства использования.Я бы использовал таблицу с некоторыми плагинами jQuery, такими как tablesorter, hovertable и tableFilter, чтобы упростить эту задачу.

Answer 2

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

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

Answer 3

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

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

<div class="row">
  <div class="column" style="float:left;"><!-- Some stuff --></div>
  <div class="column" style="float:left;"><!-- Some stuff --></div>
  <div class="column" style="float:left;"><!-- Some stuff --></div>
  <div style="clear:both;"><!-- Leave empty --></div>
</div>

Чего следует избегать, так это наоборот (используя таблицы, в которых следует использовать div).

Кроме того, даже если вы можете получить какую-то структуру таблицы, используя элементы списка, это НЕ тот маршрут, по которому вы хотите идти. Я никогда не делал этого раньше ... честно говоря, из сотен примеров, на которые я смотрел, я не думаю, что когда-либо видел, чтобы кто-то использовал их для такой цели. Я думаю, что лучшая причина здесь почему ты? Поскольку я никогда не видел этого раньше, у меня нет примеров, которые бы иллюстрировали, почему вы не должны этого делать. Но для меня это все равно, что говорить кому-то, чтобы он не использовал трубку, чтобы ослабить болт, когда у него под рукой есть гаечный ключ. Я имею в виду, конечно .... возможно, труба могла бы сделать работу, но гаечный ключ прямо там ...

Answer 4

Если мне нужно показать данные в виде таблицы, я в основном использую элемент <table>. Вы должны думать о удобстве использования при отображении 1000 строк или более. Плагин jqGrid является хорошим решением для этого и имеет такие функции, как подкачка, сортировка, поиск и т. Д.