Таблицы в адаптивном дизайне

  1. Примеры таблиц по умолчанию
  2. Вопросы для рассмотрения
  3. Различные решения
  4. Опция PDF
  5. Плюсы:
  6. Плюсы:
  7. Плюсы:
  8. Выборочно отображаемая опция данных
  9. Плюсы:
  10. Вариант горизонтальной прокрутки 2
  11. Плюсы:
  12. CSS-адаптивная таблица
  13. Так какой тип адаптивной таблицы выбрать?
  14. Май 2016 Обновление

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

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

Примеры таблиц по умолчанию

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

Вопросы для рассмотрения

  • Сколько данных содержит ваша таблица

  • На какой платформе будут создаваться таблицы (например, CMS, статический HTML-сайт)

  • Как будут создаваться таблицы (например, конструктор таблиц CMS, кодированный вручную)

  • Кто будет создавать таблицы (есть ли у пользователя технические навыки или нет)

  • Имеет ли пользователь доступ или возможность писать CSS или JavaScript

Различные решения

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

Опция PDF

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

Плюсы:

  • Легко наносится на сайт
  • Добавлен бонус для скачивания файла
  • Нужен только простой медиа-запрос CSS, чтобы скрыть исходную таблицу и отобразить ссылку PDF

Минусы:

  • Уводит пользователя со страницы
  • Возможно, ссылка не будет нажата

Контейнер горизонтальной прокрутки

Вы можете разрешить пользователю горизонтальную прокрутку таблицы, поместив ее в контейнер с переполнением: auto; и переполнение-у: скрыто; , Как только ширина страницы станет меньше таблицы, контейнер замаскирует таблицу, чтобы она не выходила за пределы ширины страницы. Затем пользователь может прокручивать пальцем влево и вправо, чтобы просмотреть содержимое таблицы. Это может быть легко применено, используя простой медиа-запрос CSS.

Плюсы:

  • Легко наносится с помощью CSS
  • Держит пользователя на странице
  • Не влияет на ширину страницы

Минусы:

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

Опция круговой диаграммы

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

Плюсы:

  • Сжатие данных для размещения на странице

Минусы:

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

Ссылка на сайт: http://tinyurl.com/7qtzet9

Выборочно отображаемая опция данных

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

Плюсы:

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

Минусы:

  • Не помещается на экране при просмотре всех данных
  • Это может быть раздражает выбор ящиков для просмотра содержимого

Ссылки: http://tinyurl.com/lvkknne (Демо)

http://tinyurl.com/7v7r3uf (Источник)

Вариант горизонтальной прокрутки 2

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

Плюсы:

  • Подходит для большого стола
  • Позволяет пользователю панорамировать отдельные столбцы

Минусы:

  • Использует JavaScript Polyfill, чтобы активировать изменение на заданной ширине
  • Требует от пользователя горизонтальной прокрутки

Ссылка на сайт: http://tinyurl.com/m53zva7

CSS-адаптивная таблица

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

Так какой тип адаптивной таблицы выбрать?

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

Тип таблицы CSS Java Script Подходит для большого содержимого таблицы. Рейтинг удобства использования из 10 Параметр PDF Да Нет Да 4 Параметр горизонтальной прокрутки Да Нет Да 7 Параметр круговой диаграммы Да Да Нет 2 Выборочно отображаемый параметр данных Да Да Нет 4 Параметр горизонтальной прокрутки 2 Да Да Да 7 CSS-адаптивная таблица Да Нет Да 9

Май 2016 Обновление

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

Здесь есть большая коллекция примеры на codepen и отличный запас таблицы в целом прошли на CSS трюки ,

Похожие

Сетевые решения: неэтичное SEO
Сетевые решения демонстрируют реальный талант к самоубийству. Иногда его ловят и быстро обращаются к нему, как это происходит, когда он занимается дегустацией доменных имен. В других случаях, однако, это может продолжаться в течение нескольких месяцев, прежде чем достаточно людей поймают, чтобы действительно вонять. Обычно мы публикуем историю о сетевых решениях на нашем веб-сайте. Как продавец доменных имен и реестр, компания восходит к ранним дням Интернета, прежде чем правительство
Search / SEO Metrics & Analytics Вопросы + Ответы
Как вы оцениваете успех онлайн-вебинара? Недавно я провел вебинар для конференции «Стратегии поисковых систем» (я делаю вступительную конференцию на SES Лондон а также SES Нью-Йорк ) и мой
SEO книги в формате PDF: есть ли?
PDF, конечно, является портативным форматом документа, сделанным известным Adobe Corporation , Многие люди не знают, что такое PDF. Многие люди хотят обучаться поисковой оптимизации , и они ищут простые, даже бесплатные, способы сделать это. Один из наиболее распространенных поисков - это книги по SEO в формате PDF .
Добавление элементов SEO в вашу базу данных: Freshdesk
Эта функция в настоящее время недоступна на Freshdesk Mint. Эта функция недоступна на старом Freshdesk. Помимо возможности форматировать статьи о решениях в форматированный текст, Freshdesk также позволяет настраивать их метаданные. Таким образом, вы можете оптимизировать свою Базу знаний для поисковых систем и убедиться, что они имеют лучший рейтинг в Google. Самый простой способ сделать это - заполнять информацию о SEO каждый раз, когда вы пишете статью о решении.
Фильтр XPath для Кричащей Лягушки
2 мая 2019 г. XPath - это язык запросов для адресации и оценки частей файлов XML. Так что XPath можно использовать на популярной SEO Spider Screaming Frog . Отдельные фильтры XPath позволяют проводить разносторонний анализ исходного кода HTML. В этом посте я представляю полезные фильтры XPath, которые вы можете использовать для своего SEO анализа. Это сэкономит вам много времени. Узнайте, как использовать XPath с Screaming Frog.
Какой город является самым конкурентоспособным для рейтинга поисковой оптимизации?
Когда дело доходит до рекламы вашей компании, поисковая оптимизация является королем холма. Эти проверенные и надежные методы работают для людей во всем мире, чтобы их бизнес оказался перед нужными людьми. Однако в одних городах это не так просто, как в других. Это
11 Интернет-магазин SEO мифы проверены: что правильно, что не так?
В среде интернет-магазина хорошие советы по онлайн-маркетингу встречаются редко, дело в том, что они слишком сложны. Тем более упорна некоторая SEO-мудрость, которая обещает большую видимость в поисковых системах и, следовательно, больше продаж. Мы спрашиваем кого-то, кто действительно знает: Бьерн Тантау Специалист по интернет-маркетингу и маркетолог
Понять, как работают структурированные данные
Поиск Google усердно работает, чтобы понять содержание страницы. Вы можете помочь нам, предоставив Google ясную информацию о значении страницы, включив структурированные данные на странице. Структурированные данные - это стандартизированный формат для предоставления информации о странице и классификации содержимого страницы; например, на странице рецепта, какие ингредиенты, время и температура приготовления, калории и так далее. Google использует структурированные данные, которые
Добавление метатегов HTML для поисковой оптимизации
Поисковая оптимизация (SEO) направлена ​​на улучшение видимости страницы или веб-сайта в результатах поиска. Основная техника SEO - добавление заголовка HTML и мета-тегов к источнику вашей страницы. Эти метатеги используются для определения информации описания и других метаданных, которые поисковые системы и сканеры могут использовать при создании поисковых индексов и коллекций. Когда вы включаете контент на страницу с помощью средства просмотра веб-контента, вы можете улучшить поисковую
В этом примере использования солнечной энергии мы рассмотрим нашу работу с компанией по установке солнечных панел...
В этом примере использования солнечной энергии мы рассмотрим нашу работу с компанией по установке солнечных панелей C-TEC Solar. C-TEC Solar ранее заключила контракт с другими агентствами, и была применена неоптимальная
Лучший плагин для WordPress SEO: Headspace 2
Сообщение от Дженис 30 марта 2012 г. в Плагины | 1 Комментарий Получить свой сайт на первой странице результатов поиска Google? Это, несомненно, непростая задача! Много времени

Комментарии

В противном случае пользователь стремится к органическим результатам для решения вашей проблемы, и это не то, что вам нужно, не так ли?
В противном случае пользователь стремится к органическим результатам для решения вашей проблемы, и это не то, что вам нужно, не так ли? Поэтому важно оптимизировать свой сайт, чтобы оставаться в хороших позициях в Google. Коммерческий поиск Это поиск, при котором пользователь стремится выполнить какую-либо транзакцию онлайн, будь то покупка товара, поиск конкретного магазина и т. Д. Итак, если ваш сайт - это электронная коммерция, работайте над
Так что же не так?
Так что же не так? Не важны ли данные? Ну, ответ и да, и нет. Да, данные имеют решающее значение для подачи. Он показывает, где находятся проблемные области, и приводит к тому, что агентство планирует сделать, чтобы исправить это. Несколько хороших SEO агентство Команды также расскажут, как эти исправления пойдут на пользу клиенту. Но что отличает великие агентства, которые последовательно выигрывают поля, и хорошие,
Wix против WordPress: какой из них выбрать?
Wix против WordPress: какой из них выбрать? Наша рекомендация здесь будет выглядеть довольно похоже на заключение нашего WordPress и Squarespace ( потому что Wix похож на Squarespace во многих отношениях ). Если вам нужен простой способ создания базового веб-сайта и вы не озабочены полным владением данными или гибкостью настройки вашего сайта, то Wix, вероятно, является хорошим решением. Просто
Так как же выбрать правильные ключевые слова с длинным хвостом?
Так как же выбрать правильные ключевые слова с длинным хвостом? Лучший способ - поставить себя на место читателя. Спросите себя: «Если бы я искал такой контент, что бы я набрал в Google, чтобы найти его?» Например, предположим, вы пишете статью «Как похудеть на 15 фунтов к следующей неделе». Если бы вы искали план, который поможет вам снизить вес в ближайшие семь дней, что бы вы искали? Возможно, что-то вроде «как потерять 15 фунтов к следующей неделе» или «как потерять
Так с какой стати это должно получиться?
Так с какой стати это должно получиться? Мой прошлый опыт онлайн научил меня на собственном опыте, что полезные нишевые авторитетные сайты могут генерировать уровни дохода Пэт Флинн, не требуя чего-либо близкого к тому же уровню удивительности, который показывает Пэт Флинн. Меня не отвлекают 90% того, что говорят гуру. Я просто придерживаюсь старые
Правильное получение этого мета-описания не будет иметь никакого значения с точки зрения алгоритма поисковой системы - так почему это все еще так важно?
Правильное получение этого мета-описания не будет иметь никакого значения с точки зрения алгоритма поисковой системы - так почему это все еще так важно? Потому что ваша конечная цель - не рейтинг, а клики . Весь смысл получения хорошего рейтинга в поисковых системах состоит в том, чтобы привлечь больше кликов на ваш сайт, и ваше мета-описание дает вам возможность убедить поисковиков нажимать на ваш сайт вместо ваших конкурентов. Хорошее
Какой из них принесет мне быстрый результат?
Какой из них принесет мне быстрый результат? Какой из них дает мне гарантированный результат? Сомнений всегда много, и я признаюсь вам, что у меня нет правильного ответа на каждый вопрос, потому что я чувствую себя обязанным сказать вам, что все будет зависеть от вашего типа бизнеса, стадии процесса, в котором вы находитесь, и различных других факторов, которые должны быть проанализированы очень тщательно. Но я могу помочь вам понять это ... Я могу
Так почему же мнение по этому, казалось бы, бесспорная тема так разделилось?
Так почему же мнение по этому, казалось бы, бесспорная тема так разделилось? Проблема может заключаться в определении технического SEO. Если мы будем называть это «практикой, реализованной на веб-сайте и сервере, которая предназначена для максимального удобства использования сайта, сканирования и индексации в поисковых системах», то (мы надеемся) каждый может согласиться с тем, что техническое SEO является необходимой основой топовой поисковой системы. рейтинги. В этом посте мы сосредоточимся
Разъясняет ли это, какой вариант использования является основной выгодой?
Разъясняет ли это, какой вариант использования является основной выгодой? И самое главное, он делает все это кратко, чтобы не слишком долго скользить? Например, краткий, но полный заголовок, такой как приведенный ниже, вероятно, работает лучше, чем просто «Maximus Outdoor Light» или даже заголовок длиной 3-4 строки, который больше похож на спам, чем на название продукта.
Почему так важно знать этот тип информации?
Почему так важно знать этот тип информации? Потому что для того, чтобы эффективно продвигать свою компанию, сначала нужно понять, кто составляет рынок Санкт-Петербурга. Тогда вам нужно понять, кого на петербургском рынке может заинтересовать ваш товар или услуга. Обладая этой информацией, веб-маркетинг и дизайн могут помочь вам разработать сильный дизайн веб-сайта, который будет напрямую общаться с этой аудиторией. Исследования показывают, что у вас есть только 6-8 секунд, чтобы повлиять на посетителей
Это не так полезно, не так ли?
Это не так полезно, не так ли? Но Google предлагает, чтобы вы продолжали работать над улучшением своего сайта, улучшением содержания, улучшением общего пользовательского опыта и, в конечном счете, следующее обновление может привести к улучшению рейтинга вашего сайта. Гленн Гейб написал очень большой пост после анализа более 200 сайтов, подведение : Обновление основного алгоритма,

Так какой тип адаптивной таблицы выбрать?
Какой город является самым конкурентоспособным для рейтинга поисковой оптимизации?
В Плагины | 1 Комментарий Получить свой сайт на первой странице результатов поиска Google?
В противном случае пользователь стремится к органическим результатам для решения вашей проблемы, и это не то, что вам нужно, не так ли?
Так что же не так?
Не важны ли данные?
Wix против WordPress: какой из них выбрать?
Так как же выбрать правильные ключевые слова с длинным хвостом?
Спросите себя: «Если бы я искал такой контент, что бы я набрал в Google, чтобы найти его?
Если бы вы искали план, который поможет вам снизить вес в ближайшие семь дней, что бы вы искали?

Авторизация

Реклама

Реклама

Архив сайта

    Как путешествовать и зарабатывать деньги
    Согласились бы вы путешествовать в свое удовольствие по разным городам и странам и при этом зарабатывать? Наверняка многие ответят утвердительно. Если вы хотите начать зарабатывать, путешествуя, велкам!

    Сонник: путешествие, к чему снится путешествие — полное толкование снов
    Во время сна мы путешествуем по закоулкам своего подсознания. Нам снятся самые разные сны — цветные и черно-белые. Иной раз подумаешь, что приснившееся сновидение могло прийти только к алкоголику или

    10 Доступных способов путешествовать по миру бесплатно
    10 Доступных способов путешествовать по миру бесплатно Путешествия! Как много в этом слове! Путешествия — это мечта! И все это действительно так. Хотя наверняка сейчас найдется немало скептиков, которые

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

    По миру без виз
    В мае завершился очередной сумасшедший проект профессионального путешественника и писателя Валерия Шанина: кругосветное путешествие, в ходе которого туристам ни разу не пришлось заходить в иностранные

    Можно ли беременным путешествовать?
    Вот оно, свершилось! Новость о скором пополнении в семье не только радует, но и порой заставляет кардинально поменять все планы на жизнь. И это понятно – будущая мамочка очень переживает о своем драгоценном

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

    5 сомнительных способов перемещаться во времени
    Эммет Браун утверждал, что достаточно разогнаться на "Делориане" , чтобы попасть и в прошлое, и в будущее. Хотя многие имеют дерзость не согласиться со светочем и предлагают свои теории. Впрочем, они

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

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


Облако тегов