Сайт своими руками


Пособие для начинающих
Редактируем готовые шаблоны


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


» » Формирование таблиц на маленьких экранах мобильных устройств.

Формирование таблиц на маленьких экранах мобильных устройств.

  • Автор: Saah
  • |
  • Комментариев: 0
  • |
  • Просмотров: 448
Формирование таблиц на маленьких экранах мобильных устройств.

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

Веб-дизайнеры задались решением вопроса, как лучше обрабатывать табличный материал на маленьких экранах.

Варианты адаптации таблиц под маленький экран.

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

Простые таблицы в две или три колонки для большей гибкости можно представить в виде списка тегом dl.

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

Изучите также способ, предложенный компанией Filament Group (считайте их главными сторонниками адаптивного дизайна) на сайте https://www.filamentgroup.com/lab/responsive-design-approach-for-complex-multicolumn-data-tables.html.

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


Людям интересно:


Статья опубликована: 29-03-2016, 08:20

Сохраните для себя


Оставьте комментарий.
Ваше мнение будет полезно посетителям сайта:




Имя:* E-Mail:*
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите код: *
Использование материалов сайта приветствуется. При копировании и размещении данной информации на сторонних ресурсах, ссылка на сайт SiteY.ru желаема.