#html #html-lists
#HTML #html-списки
Вопрос:
У меня есть простая таблица данных с менее чем 100 строками. В настоящее время я отображаю данные в виде серии вложенных разделов. Каждая строка имеет контейнер div с вложенными разделениями, представляющими столбцы данных внутри него. (Это было реакцией с моих самых ранних дней программирования, когда не было ничего похожего на div).
Первый столбец данных форматируется как ссылка на изображение, а два других столбца представляют собой текст.
Имеет ли смысл возвращаться к использованию таблицы?
Кроме того, в качестве эксперимента я подумал об использовании nests ULS. UL, содержащий все строки, и отдельный горизонтальный UL для каждой строки.
В качестве дополнительного примечания / вопроса у меня есть еще один блок данных, который может привести к тысячам строк. Приведет ли этот объем данных к другому ответу для «наилучшей практики» в этом случае?
Комментарии:
1. браузер обрабатывает большое количество строк, если вы размещаете элементы таблицы в правильном порядке
<table><thead/><tfoot/><tbody/></table>
Ответ №1:
Реально, вы можете использовать любой контейнер, который вам нравится. Лучшая практика — использовать элементы для того, для чего они предназначались. Если вы отображаете табличные данные, обязательно используйте таблицу! Есть отличные плагины, которые улучшают работу пользователя, и их действительно легко читать и копировать / вставлять.
Вопрос, который я всегда задаю себе, заключается в том, будут ли эти данные лучше всего отображаться в файле Word или Excel. Если Excel, то это таблица. Если Word, то это div.
Если вы используете тысячи строк, вы, вероятно, захотите предоставить пользователю контроль над сортировкой, фильтрацией и извлечением дополнительной информации для удобства использования. Я бы использовал таблицу с некоторыми плагинами jQuery, такими как tablesorter, hovertable и tableFilter, чтобы упростить это.
Комментарии:
1. Я пометил это как «правильный» ответ, поскольку мне также понравилась аналогия.
2. Вы можете иметь табличные данные в Word, хотя … 🙂 В любом случае, аналогия имеет смысл.
Ответ №2:
В этом случае таблица подойдет. Таблицы предназначены для отображения табличных данных, таких как строка в БД. Однако вам следует избегать использования таблиц для макета страницы….
Что касается наличия тысяч строк, вы можете изучить разбивку на страницы. Я не думаю, что есть лучшая «лучшая практика»
Ответ №3:
Списки предназначены для списков, таблицы — для табличных данных, а divs — для макетов. Итак, если вы хотите пойти по пути лучших практик; Я думаю, вам следует использовать таблицу здесь.
При этом использование divs в отличие от таблиц не так уж и плохо. Я бы не стал беспокоиться о переписывании, если вы уже используете divs вместо таблицы. Единственное предостережение заключается в том, что вы очищаете свои столбцы с плавающей запятой divs. ex:
<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>
Чего вам следует избегать, так это обратного (использование таблиц, в которых следует использовать divs).
Кроме того, даже если вы сможете получить какую-то структуру таблицы, используя элементы списка, это НЕ тот путь, по которому вы хотите пойти. Я никогда этого не делал before…to честно говоря, из сотен примеров, которые я просмотрел, я не думаю, что когда-либо видел, чтобы кто-то использовал их для такой цели. Я думаю, лучшая причина здесь в том, почему вы? Поскольку я никогда раньше этого не видел, у меня нет под рукой примеров, иллюстрирующих, почему вы не должны этого делать. Но для меня это сродни тому, чтобы сказать кому-то не использовать трубу для откручивания болта, когда у них под рукой есть гаечный ключ. Я имею в виду, конечно …. может быть, труба могла бы выполнить работу, но ключ здесь…
Комментарии:
1. Я ценю, что вы стараетесь изо всех сил добавлять код в качестве примера. Мой код похож на ваш пример, за исключением того, что класс «row» очищает значение с плавающей точкой.
2. Добавление clear не должно изменять внешний вид вещей. Это позволяет избежать плавающих ошибок в IE7, где свойство css float обрабатывается неправильно и переходит в другие части документа. Так, например, создание таких таблиц; отсутствие пустого прозрачного div может привести к тому, что элементы под вашей таблицей будут всплывать, даже если вы этого не хотели.
Ответ №4:
Если мне нужно отобразить данные в виде таблицы, я в основном использую <table> элемент. Вы должны думать о удобстве для пользователя при отображении 1000 строк или более. Плагин jqGrid является хорошим решением для этого и имеет такие функции, как подкачка, сортировка, поиск и т.д.
Ответ №5:
списки предназначены для данных одного измерения. таблицы предназначены для более чем одного измерения данных. divs предназначены для разделения объектов или включения чего-либо в другие. если каждый элемент ваших данных имеет отношение владельца к некоторым другим, вам следует использовать table.