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

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

Первый способ адаптации

Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap ).

Table-wrap { text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; } @media screen and (max-width: 600px) { .table-wrap { overflow-y: scroll; } }

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом.
Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Второй способ адаптации

Для начала поменяем разметку:

Раздали каждому столбцу атрибут data-label , который нам пригодится в будущем.

Задаем базовые стили:

body { text-align: center; padding-top: 10%; font-family: sans-serif; background-image: url("bg.jpg"); background-size: cover; height: 100vh; color: #fff; } .table-wrap { text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; } table { border: 1px solid #ccc; width: 100%; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; } table tr { border: 1px solid #ddd; padding: 5px; } table th, table td { padding: 10px; text-align: center; border-right: 1px solid #ddd; } table th { color: #fff; background-color: #444; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело.

Как это исправить? добавляем стили:

@media screen and (max-width: 600px) { table { border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; border-right: 1px solid transparent; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } }

Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса :before мы присоединяем к левому краю наши дата-атрибуты. Выходит так:

Вот еще пен:

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

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

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

Нарисуем таблицу графика работы службы доставки со сменными курьерами и ценами, добавив атрибут aria-label (текстовую метку) к ячейкам с данными.

Table.delivery {width: 100%; border: 0px; border-collapse: collapse;} table.delivery thead {font-weight: bold;} table.delivery td {padding: 0.6rem 1rem; border-bottom: 1px solid #e8e9eb;}

Внешний вид таблицы на ПК с фиксированным разрешением 1140 пикс. будет выглядеть примерно так.

При уменьшении разрешения дисплея до 334 пикс. ячейки сожмутся на сколько это возможно и оставят часть информации скрытой.

С помощью CSS мы сможем добиться нужно эффекта - разделение таблицы на понятные посетителю блоки при разрешении экрана меньше 800 пикс. Просто добавим к уже созданным стилям следующий код:

@media screen and (max-width: 800px) { table.delivery thead { display: none; } table.delivery tr { display: block; margin-bottom: 1rem; border-bottom: 2px solid #e8e9eb; } table.delivery td { display: block; text-align: right; } table.delivery td:before { content: attr(aria-label); float: left; font-weight: bold; } }

На скриншоте ниже вы можете наглядно оценить превосходство данного метода.

Спасибо за внимание! Не забывайте ставить оценку в рейтинге статьи!

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

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

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

Будут ли люди сравнивать данные в колонках или строках?

Пример 1. Люди не будут сравнивать данные

Сначала рассмотрим пример таблицы, в которой пользователям не обязательно сравнивать данные. Пример такой таблицы - список фильмов . В этой таблице фильмы расположены в соответствии с рейтингом.

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

Именно это сделали создатели сайта JQuery Mobile.

Пример 2. Люди будут сравнивать данные строк или столбцов

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

Рис. 3. Таблица с данными, которые подлежат сравнению

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

Рис. 4. Таблица с данными на экране мобильного телефона

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

Рис. 5. Таблица с данными в полной версии сайта

Рис. 6 и 7. Та же таблица в мобильной версии. Остались только самые важные столбцы, но при необходимости можно включить все остальные.

Какая информация - важная?

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

• какая информация нужна людям больше всего?
• какие колонки - самые важные для понимания той информации, которую предоставляет таблица?
• какие колонки скорее всего будут нужны людям?

Смогут ли пользователи отличить одну часть таблицы от другой?

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

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

Должно ли все быть на экране одновременно, или можно добавить дополнительные элементы в случае необходимости?

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

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

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

Итак, что имеет значение, когда речь идет о таблицах в адаптивном дизайне?

• Поймут ли пользователи значение таблицы, даже если ее внешний вид будет меняться?
• Смогут ли они каким-то образом получить всю информацию, которая есть в таблице?
• Уверены ли Вы, что все URL доступны вне зависимости от устройства?

Если Вы можете ответить «да» на все три вопроса, значит, на Вашем сайте нет проблем с таблицами.

Ваш контент подскажет, что лучше всего делать с таблицами.

Есть множество различных способов разместить таблицы в адаптивном дизайне. Со временем их станет еще больше. Но каким образом выбрать правильный способ? Ответ может быть только один.

Ваш контент подскажет, что лучше всего делать с таблицами. Ваша задача - правильно проанализировать его.

Отобразить объемные данные на маленьком экране — всегда та еще головоломка. Какими способами можно ее решить и как должна выглядеть удобная таблица на мобильном?

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

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

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

Для сложных или объемных текстов, например, в сравнительных таблицах, на узком мобильном экране поместится только 2 колонки. А если таблица заполнена в основном цифрами, столбцы можно сделать уже и, следовательно, уместить больше.

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

Поворачивать телефон — это крайняя мера

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

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

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

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

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

На сайте eBag последняя колонка с товарами обрезана, и пользователи понимают, что доступна горизонтальная прокрутка.

Сайт Subaru использует точки и стрелки над таблицей, показывая пользователям, что доступно еще несколько экранов с контентом. Точки создают некоторую путаницу, потому что две из них выделены, чтобы показать «текущее местоположение» (то есть две видимые сейчас колонки). К тому же, стрелки лучше разместить не над таблицей, а прямо в ней.

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

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

Officeworks.com.au зафиксировали первый столбец с товаром, так что пользователи могут сравнивать с ним все остальные варианты. Товар в первом столбце служит точкой отсчета при сравнении, и пользователи могут заменить его каким-нибудь другим. Стрелки, размещенные прямо в таблице, дают понять, что данные можно прокручивать влево и вправо.

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

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

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

Чтобы увидеть информацию о питательных свойствах Jamba Juice, посетителю нужно выбрать интересующий его напиток, чтобы увидеть информацию о нем. Переключатель «Маленький/Средний/Большой» позволяет выбрать нужный вариант, но не позволяет их сравнивать. Чтобы понять, например, разницу в количестве калорий между маленьким и средним стаканом, пользователь должен сначала запомнить количество калорий для маленького, потом переключиться на средний, посмотреть количество калорий для него и самостоятельно вычесть одно из другого — куча умственной работы, которую большинство людей поленится делать.

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

На сайте Dell пользователи выбирают интересные им технические характеристики продукта в меню вверху страницы. Слева: по умолчанию отображаются все характеристики. В центре: пользователь выбирает нужные. Справа: отображается только то, что он выбрал.

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

• получить общее представление о типах данных, доступных в таблице;
• получить прямой доступ к интересующей информации.

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

Если вы используете на сайте таблицы, то их также надо адаптировать под мобильные устройства. Я использую два варианта адаптации – сжатие и перенос слов + выстраивание таблиц в один столбик.

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

Основной вариант

Итак, для большинства таблиц на сайте я использую код в css:

@media screen and (max-width:1000px){td{word-break:break-all;}

Он указывает, что слова, которые не помещаются в блок, должны при разрешении менее 1000 px начинаться с новой строки. Разрешение 1000 – это пример, смотрите по своим сайтам, для кого-то есть смысл ставить разрешение меньше.

Добиться хорошего отображения table можно с помощью двойного кода в CSS. Я использую параллельно:

@media screen and (max-width:700px){img{max-width:96% !important;height:auto !important;} iframe, textarea, input, button, submit, video, object, embed{max-width:99% !important;} table, span, div, ins{max-width:100% !important;}

В нём указано, что при разрешении менее 700 px таблица отображается в 100%-ом варианте по размеру, то есть, сжимается, но занимает весь блок по ширине. Свойство!important показывает, что оно будет применяться для всех разрешений менее 700 px.

Адаптация в один столбик

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

Затем в стилях прописывается код:

@media only screen and (max-width: 320px),(min-device-width: 320px) and (max-device-width: 600px) /* Force table to not be like tables anymore */ table.mceItemTable, table.mceItemTable thead, table.mceItemTable tbody, table.mceItemTable th, table.mceItemTable td, table.mceItemTable tr {display: block ; }

В данном случае display: block; указывает, что в таблицах mceItemTable блокируется tbody, th, td, tr. Как результат, при разрешении менее 600 px таблицы строится в одну колонку и table, по сути, не является.

Использование таблиц – это ещё один пирожок в корзину удобства пользователя, но они должны корректно отображаться и на мобильных устройствах, иначе результат будет противоположным ожидаемому – посетители станут убегать от кривых Table и ухудшат ПФ. Никто не запрещает выводить таблицы в одну колонку для всех Table, и наоборот, но лучше микст в зависимости от особенностей табличной конструкции.