Шаблоны проектирования таблиц в Интернете

Таблицы — это шаблон проектирования для отображения больших объемов данных в строках и столбцах, что делает их эффективными для сравнительного анализа категориальных объектов. Таблицы использовались для этой цели еще во ² веке, и когда мир начал переходить на цифровые технологии, таблицы пришли вместе с нами.

Было неизбежно, что Интернет будет поддерживать отображение данных в табличном формате. Таблицы HTML представляют табличные данные семантически и структурно соответствующим образом. Однако стили по умолчанию в HTML-таблицах — не самая эстетически приятная вещь, которую вы когда-либо видели. В зависимости от желаемого визуального дизайна требовались некоторые усилия на стороне CSS, чтобы украсить эти таблицы. Десять лет назад в журнале Smashing Magazine была опубликована статья «10 лучших дизайнов таблиц CSS», и она по сей день продолжает получать много трафика.

Интернет сильно развился за последнее десятилетие, и сейчас удобнее, чем когда-либо, адаптировать свой сайт или приложение к области просмотра, в которой он просматривается. доступность. Поскольку в ближайшее время таблицы, похоже, не выйдут из моды, давайте посмотрим, как можно создавать таблицы в Интернете в 2019 году.

Параметры только для CSS

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

К сожалению, без помощи JavaScript для некоторых манипуляций с DOM на фронте специальных возможностей у нас есть только несколько опций только для CSS. Но для небольших наборов данных их часто бывает достаточно.

Вариант 1: ничего не делать

Мы собираемся начать с сценария с низкими усилиями. Если ваши данные помещаются в таблицу с несколькими столбцами и большим количеством строк, то такая таблица в значительной степени готова для мобильных устройств.

Проблема, с которой вы столкнетесь, вероятно, заключается в том, что на более широких экранах слишком много места, поэтому может быть целесообразно «закрыть» максимальную ширину таблицы max-width , позволяя ей уменьшаться по мере необходимости на узком экране.

Такой шаблон работает лучше всего, если ваши данные сами по себе не являются строками и строками текста. Если они числовые или короткие фразы, вы, вероятно, можете обойтись без особых действий.

Вариант 2: Стиль прокрутки

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

Давайте сначала посмотрим на «базовое» переполнение. Представьте, что я использую воздушные кавычки вокруг основного, потому что стиль для прокручивающихся теней совсем не такой. Тем не менее, в данном случае «базовый» относится к тому факту, что таблица никак не трансформируется.

Эта техника прокрутки теней принадлежит Роме Комарову и Леа Веру, которые перенимают идеи друг друга для создания волшебства. Он зависит от использования нескольких градиентов (линейных и радиальных) в качестве фоновых изображений содержащего элемента и использования background-attachment: local для позиционирования фона относительно его содержимого.

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

Другой вариант прокрутки — перевернуть заголовки таблицы из конфигурации строк в конфигурацию столбцов, применяя горизонтальную прокрутку к содержимому элемента <tbody> . Этот метод использует поведение Flexbox для преобразования строк таблицы в столбцы.

Применяя display: flex к таблице, он делает дочерние элементы <thead> и <tbody> гибкими, которые по умолчанию располагаются рядом друг с другом в одной строке flex.

Мы также делаем элемент <tbody> гибким контейнером, таким образом делая все элементы <tr> внутри него гибкими дочерними элементами, также расположенными в одной гибкой строке. Наконец, каждая ячейка таблицы должна иметь block отображения вместо стандартной table-cell .

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

Добавьте немного JavaScript

Как упоминалось ранее, параметры компоновки, включающие преобразование таблицы путем изменения display значений, иногда имеют негативные последствия для доступности, для устранения которых требуются некоторые незначительные манипуляции с DOM.

Кроме того, Эндрю Койл дает ряд советов по пользовательскому опыту при проектировании таблиц данных, включая такие функции, как нумерация страниц, сортировка, фильтрация и т. д. (функции, для включения которых требуется некоторый JavaScript).

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

Строки в блоки, с исправлением доступности

Насколько я знаю, эта техника адаптивных таблиц данных появилась из статьи Криса Койера «Адаптивные таблицы данных» в CSS-Tricks еще в 2011 году. С тех пор она была адаптирована и расширена многими другими.

Суть этого метода заключается в использовании медиа-запроса для переключения свойства отображения элемента таблицы и его дочерних элементов на block в узком окне просмотра.

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

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

Мы можем добиться такого эффекта с помощью автоматических полей в контексте гибкого форматирования. Если мы установим свойство display для каждого элемента <td> на flex, поскольку псевдоэлементы генерируют блоки, как если бы они были непосредственными дочерними элементами исходного элемента, они становятся flex-потомками <td> .

После этого нужно установить margin-right: auto для псевдоэлемента, чтобы подтолкнуть содержимое ячейки к дальнему краю ячейки.

Другой подход к макету узкого окна просмотра — использование комбинации Grid и display: contents . Обратите внимание, что display: contents в поддерживаемых браузерах в настоящее время имеет проблемы с доступностью, и этот метод не следует использовать в рабочей среде, пока эти ошибки не будут исправлены.

Но, возможно, вы читаете это после того, как эти ошибки были устранены, в таком случае вот альтернативный вариант макета.

Каждый элемент <tr> имеет значение display: grid , а каждый элемент <td> — значение display: contents . Только непосредственные дочерние элементы контейнера сетки участвуют в контексте форматирования сетки; в данном случае это элемент <td> .

Когда display: contents применяется к <td> , оно «заменяется» своим содержимым, в этом случае псевдоэлемент и <span> внутри <td> вместо этого становятся дочерними элементами сетки.

Что мне нравится в этом подходе, так это возможность использовать max-content для определения размера столбца псевдоэлементов, гарантируя, что столбец всегда будет иметь ширину самой длинной метки, без необходимости вручную назначать для него значение ширины.

В будущем, когда значения размеров min-content , max-content и fit-content (охватываемые модулем CSS Intrinsic & Extrinsic Sizing Module Level 3) будут поддерживаться в качестве общих значений width и height , у нас будет еще больше возможностей для укладки вещи.

Недостатком этого подхода является то, что вам нужен дополнительный <span> или <p> вокруг содержимого в ячейке таблицы, если его еще не было, иначе не было бы возможности применить к нему стили.

Простая нумерация страниц

В этом примере показана базовая реализация разбивки на страницы, которая была изменена на основе этого CodePen Гьором Милевски для разбиения на страницы строк таблицы вместо элементов div. Это расширение примера «стилизации прокрутки», рассмотренного в предыдущем разделе.

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

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

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

Простая сортировка

В этом примере показана базовая реализация сортировки, модифицированная Питером Ноублом на основе этого фрагмента кода, чтобы учесть как текст, так и числа:

Было бы полезно иметь какой-то индикатор того, какой столбец сортируется в данный момент и в каком порядке. Мы можем сделать это, добавив классы CSS, которые затем можно стилизовать по своему усмотрению. В этом случае символы индикатора представляют собой псевдоэлементы, которые переключаются при нажатии на целевой заголовок.

Простой поиск

Этот пример представляет собой базовую функцию фильтрации, которая перебирает все текстовое содержимое каждой ячейки таблицы и применяет класс CSS для скрытия всех строк, которые не соответствуют полю ввода поиска.

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

Пусть библиотека справится с этим

Приведенные выше фрагменты JavaScript служат для демонстрации того, как можно улучшить таблицы с большими объемами данных, чтобы облегчить жизнь пользователям этих таблиц. Но с действительно большими наборами данных, возможно, имеет смысл использовать существующую библиотеку для управления большими таблицами.

Шаблон переключения столбцов — это способ, при котором несущественные столбцы скрываются на небольших экранах. Обычно я не сторонник скрытия контента только потому, что область просмотра узкая, но этот подход Мэгги Костелло Вакс из Filament Group решает эту мою проблему, предоставляя раскрывающееся меню, которое позволяет пользователям переключать скрытые столбцы обратно в Посмотреть.

Вышеупомянутая статья была опубликована еще в 2011 году, но с тех пор Filament Group разработала полный набор плагинов для адаптивных таблиц, известных как Tablesaw, которые включают в себя такие функции, как сортировка, выбор строк, интернационализация и так далее.

Функция переключения столбцов в TableSaw также больше не зависит от jQuery, в отличие от примеров из исходной статьи. Tablesaw — одна из единственных библиотек, которые я смог найти и которая на данный момент не зависит от jQuery.

Подведение итогов

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

Дальнейшее чтение

• «Только CSS-адаптивные таблицы», Дэвид Бушелл
• «Доступные, простые, отзывчивые таблицы», Давиде Риццо, CSS-Tricks
• «Адаптивная верстка стола», Мэтт Смит.
• «Адаптивные шаблоны: таблицы», Брэд Фрост.
• «Эй, таблицы по-прежнему можно использовать», — Адриан Роселли.
• «Таблицы, свойства отображения CSS и ARIA», Адриан Роселли
• «Таблицы данных», Хейдон Пикеринг.