Есть два разумных способа построить таблицу на веб-странице:
- используя специальные элементы
table,trи HTMLthtd - используя только
divs, но соответствующим образом стилизованный
Две визуально идентичные таблицы ниже закодированы с использованием этих подходов:
Две таблицы выглядят одинаково, но они закодированы с помощью совершенно разных HTML:
Таблица справа имеет немного более длинный HTML-код из-за дополнительных classатрибутов в строке divs. Но занятия по divs совсем не нужны. Я мог бы стилизовать все divs, используя селекторы на основе корня таблицы div. Я назначил ряду определенный класс divглавным образом для упрощения селекторов CSS в примере кода. Кроме того, считается, что простые селекторы сокращают время расчета стилей при рендеринге.
Как расположить div в таблице?
Существует несколько способов отобразить набор divs в виде таблицы.
Можно буквально преобразовать divs или любые элементы в tableэлементы trи td, применяя displayсвойство со значениями table, table-row, table-cellсоответственно. Полученная divтаблица мало чем отличается от стандартной таблицы — в обоих видах таблицы размеры рассчитываются автоматически. Я не знаю каких-либо допустимых вариантов использования для замены стандартных tableи тегов на теги, trпоэтому я не могу рассказать больше об этом подходе.tddivs
В этом посте я исследую еще два разумных подхода. Оба подхода требуют указания ширины для всех ячеек, чтобы эквивалентные ячейки выравнивались и образовывали столбцы. Это требование отличает divтаблицы от стандартных таблиц. Чтобы указать ширину столбца в стандартной таблице, достаточно указать ширину ячейки в первой строке.
В одном подходе ячейки divотображаются как inline-blockконтейнеры. В другом подходе строки divотображаются как flexконтейнеры:
Неудобство таблиц div с ячейками встроенного блока
С точки зрения пользователя, разница между таблицами со встроенными ячейками и таблицами с гибкими строками огромна. Пользователи наверняка жалуются на таблицу со строками, состоящими из inline-block divs.
Когда пользователи просматривают данные, они часто хотят скопировать их фрагменты и вставить в другое место. Чтобы скопировать содержимое ячейки, сначала нужно выделить это содержимое. Если значением ячейки является число, дата или слово, самый простой способ выделить его — дважды щелкнуть по нему. Если пользователь дважды щелкает значение, отображаемое в ячейке , div оформленной в виде inline-block, выделяется вся строка. Это может очень раздражать пользователей, и нет простого способа предотвратить это. Эта проблема выбора двойным щелчком не возникает в стандартных таблицах HTML, а также в div таблицах со flex строками.
Вы можете попробовать дважды щелкнуть ячейки в трех примерах таблиц, показанных выше на странице примера https://tablevsdivtable.onrender.com/tdVsDiv.html.
Когда использовать div-таблицы?
В стандартной таблице размеры ячеек могут быть рассчитаны автоматически, тогда как в divтаблице каждой ячейке должна быть задана ширина. Это означает, что если таблицу не нужно сильно стилизовать, проще использовать стандартную таблицу.
Стилизация может быть проще для div таблиц. Например, попробуйте свернуть строку в таблице. Установка высоты на 0 не будет иметь никакого эффекта tr.td
Самый сильный аргумент в пользу div таблиц — производительность. Когда данных достаточно много, div таблица может предложить ощутимо лучший пользовательский интерфейс. Чтобы продемонстрировать явное преимущество div таблиц, я буду повторно использовать подход к бенчмаркингу, который я использовал в своих предыдущих сообщениях .
…
Выводы
Легче использовать стандартные таблицы HTML. Но рендеринг стандартной таблицы занимает более чем на 30 % больше времени, чем рендеринг тех же данных в div таблице. Если данных мало, пользователи не оценят разницу во времени рендеринга. Но если пользователи должны видеть много данных, они будут довольны, если данные будут отображаться в виде div таблицы.
div таблицы со flex строками немного менее эффективны, чем div таблицы с inline-block ячейками. Однако inline-block ячейки не позволяют пользователям эффективно выбирать содержимое двойным щелчком.
Таким образом, если вы разрабатываете приложение, отображающее большое количество данных в таблицах, используйте div таблицы со flex строками.