Livestreet 100 адаптивную таблицу в посте. Какая информация - важная

Адаптивные сайты уже давно перестали быть диковинкой и они встречаются всё чаще и чаще. Учитывая последние новости с ранжированием поисковых систем (если кто не знает, в поиске с мобильного устройства приоритет отдается адаптивным сайтам), количество таких сайтов будет расти и дальше. Можно быть противником адаптации под мобильные устройства или же выступать «за», но факт остается фактом: всё чаще клиенты требуют, чтобы их сайт был адаптивным и веб-мастерам приходится это делать.

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

Для начала посмотрим как выглядит таблица:

Модель телефона Цена RAM, Гб Диагональ, дюймов PPI Аккумулятор, мА·ч

OnePlus One	100500 руб	3	5.5	401	3100
OnePlus Two	100500 руб	4	5.5	401	3300
OnePlus X	100500 руб	3	5	441	2525

Bootstrap-способ вёрстки адаптивной таблицы

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

Всё просто: таблица обёрнута в div, которому задана максимальная ширина в 100% и overflow: auto.

...

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

Результат, как и следующий пример, можно посмотреть на этой странице .

Вёрстка по-настощему адаптивной таблицы

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

Для начала нужно подключить плагин (скачать на GitHub или подключить с CDN), а также инициализировать его:

$(function() { $(".table").footable({}); });

Здесь нужно кое-что прояснить: скрипт почему-то считает не ширину viewport-а, а ширину таблицы. Чтобы это исправить, нужно чуть «модернизировать» скрипт:

JQuery(function () { jQuery(".table").footable({ calculateWidthOverride: function() { return {width: jQuery(window).width()}; } }); })

В инициализации указываем класс таблицы или просто тег table, если хотим, чтобы все таблицы на сайте были адаптивными.

Модель телефона Цена RAM, Гб Диагональ, дюймов PPI Аккумулятор, мА·ч ...

Что всё это значит? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI» и «Аккумулятор». При уменьшении до телефонов, к ним присоединится и колонка «Цена».

Контрольные точки можно указать в инициализации:

JQuery(function () { jQuery(".table").footable({ calculateWidthOverride: function() { return {width: jQuery(window).width()}; }, breakpoints: { mobile: 0, tablet: 720, desktop: 1024 } }); })

Это значит что в промежутке 0-720 действует правило для mobile, 720-1024 - tablet, а выше 1024 - desktop. Ничто не мешает создать вам ещё больше правил, если это требуется.

Также можно сделать, чтобы какая-то колонка была раскрыта по-умолчанию. Для этого указываем data-атрибут data-expanded=«true»

... ...

OnePlus One	100500 руб	3	5.5	401	3100

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

Таблицы данных не очень хорошо справляются с адаптивным дизайном. К сожалению, этот момент есть. Отзывчивый дизайн — это все, что нужно для настройки дизайна для размещения экранов разных размеров. Итак, что происходит, когда экран уже, чем минимальная ширина таблицы данных? Вы можете уменьшить масштаб и увидеть всю таблицу, но размер текста будет слишком мал для чтения. Или вы можете приблизить точку считывания, но для просмотра таблицы потребуются горизонтальная прокрутка по вертикали и (печальная). Таблицы данных могут быть довольно широкими и обязательно такими. Таблицы можно выполнить гибкими по ширине (wight=100%), но содержимое ячеек может стать настолько узким, что его просто невозможно будет увидеть.

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

Как сделать адаптивную таблицу с помощью CSS

Чтобы создать отзывчивую таблицу, добавьте элемент контейнера overflow-x:auto вокруг

:

...

Примечание. В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если установлено «overflow:scroll» или авто).

Windows : Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .

Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [ 2 ] .

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

1 2 3 4 5 6 7 8 9 10

Table_data_1	Table_data_2	Table_data_3	Table_data_4	Table_data_5	Table_data_6	Table_data_7	Table_data_8	Table_data_9	Table_data_10

HTML / XHTML. Код:

1

2

3

4

5

6

7

8

9

10

Table_data_1

Table_data_2

Table_data_3

Table_data_4

Table_data_5

Table_data_6

Table_data_7

Table_data_8

Table_data_9

Table_data_10

table {display: block; overflow-x: auto;}

/* Дополнительные CSS, просто для приведения примера к некоему внешнему виду: */

table {border-collapse: collapse;}

table td,th {padding: 10px; border: 1px #000 solid;}

Примечание : CSS свойство display: block делает так, что таблица занимает по ширине только столько пространства, сколько ей нужно, чтобы вместить данные без визуальных искажений. Не больше, не растягиваясь по всей ширине доступного пространства на странице. Даже если в CSS код добавлен width: 100% . Пример:

1 2 3

Table_data_1	Table_data_2	Table_data_3

Aliosque subditos et thema

Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS. Пример: HTML / XHTML. Код: CSS. Код: .example {position: relative; left: 0px; top: 0px; height: 90px; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto; width: 68px;} В примере по центру выравнивается абсолютно позиционированный элемент img, но вообще данный способ горизонтального выравнивания по центру работает и с другими как строчными, так и блочными абсолютно позиционированными элементами. Ширина абсолютно позиционированного элемента так же может быть в процентах или в других единицах измерения. CSS свойства контейнера (в примере.example), внутри которого находится выравниваемый по центру элемент, могут быть самые разные, выравнивание по центру создается с помощью стилей, непосредственно относящихся к элементу: .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto;}. [ 1 ] А так же в Netscape 8.01+, Mozilla 1.5+. [ 2 ] А так же в Netscape 8.01+, Mozilla 1.5+.

В CSS нет свойства "float: bottom", однако эффекта можно добиться и некоторыми другими способами. Пример: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Код: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Link 1

Link 2

Link 3

Float bottom CSS. Код: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Дополнительные CSS, просто для приведения примера к некоему внешнему виду */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} Всё содержимое веб-страницы находится в контейнере box1. Внутри него два контейнера div: 1. content1 с собственно содержанием слева и меню справа. 2. bottom1 после content1.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первый вариант подходит для всех многоколоночных таблиц, второй вариант я на некоторых сайтах использую на морде. Есть такая слабость выводить меню в виде 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, но часто необходимо. Для начала укажите для таблицы оригинальный класс, например,