Как сделать таблицу мобильная версия

Адаптивная таблица для мобильных устройств

css3 responsive tables mobile

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

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

HTML разметка

Для управления таблицей, мы обернули её в блок с классом container.

Название услуги Сайт Сроки Количество страниц Стоимость
Адаптация таблиц Лендинг 5 дней 1 1 000 руб
Адаптация таблиц Корпоративный сайт 6 дней 5 2 000 руб
Адаптация таблиц Интернет-магазин 7 дней 15 5 000 руб

Атрибут data-label

CSS правила

.container <
min-width: 320px;
max-width: 100%;
padding: 0 15px;
box-sizing: border-box;
>

table <
border-collapse: collapse;
width: 100%;
margin: 20px 0;
>

table td, table th <
padding: 10px;
border: 1px solid #cbbdbd;
>

tr:nth-child(even) <
background-color: #f0f4c3
>

css3 responsive tables mobile 01

Адаптируем таблицу

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

@media (max-width: 720px) <
// переопределяем CSS правила
>

Скроем названия в шапке таблицы.

.container table thead <
display: none;
>

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

.container table tr <
display: block;
>

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

.container table td <
display: flex;
justify-content: space-between;
font-size: 14px;
>

При помощи псевдоэлемента before и функции attr(), подставим в каждую ячейку значение data-label.

.container table td::before <
content: attr(data-label);
font-weight: bold;
margin-right: 20px;
>

css3 responsive tables mobile 02

Для просмотра, как работает адаптация таблицы, перейдите на CodePen и нажмите F12.

date article

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 1 ):

Очень востребованая возможность при вёрстке сайтов. Спасибо Михаилу!

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

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

Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:
7567daea6caa1d6775352a4f34eaafda

Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.

1. Способ от Chris Coyier

ac3743bd9b75a1662b893f2416d5e383

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

2. Способ от Zurb.com

8c3c4ba951ed659bb45c648a21652e6c

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

3. Способ от Scott Jehl

2cd93153477f3c67287400bed33cf9f6

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

4. Способ от Todd Parker

0f90511ccde6e90ded7f02fb614f09de

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

Ой, у вас баннер убежал!

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

0c26b7a682a2bc98d848b258a9b9dff7

Похожие публикации

GeekUniversity открывает набор на факультет веб-дизайна

Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов

[Перевод] HTML5 Адаптивные изображения

Заказы

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Минуточку внимания

Комментарии 21

dbe5704f1865980737df0b7993397527

bf312fe27a4610bd48e88ef7fe70d0df

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

2 ничего. 4 — не совсем способ, конечно, но полагаю, если по высоте на экран влезет, то тоже имеет право на жизнь. 2 и 4 вообще полезно было бы совместить.

ca8cbc9c922c1f0fc9be8ae11ad9cac5

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

Мне кажется одного способа точно не хватает: он напоминает 1-ый вариант, но при этом убираются заголовки некоторых столбцов — это возможно в определённых случаях когда интуитивно понятно назначение определённых значений таблицы.

Источник

Добавление таблицы в приложениях Office на мобильном устройстве

В Word, Excel и PowerPoint для мобильных устройств можно добавить таблицу, выбрать стандартный шаблон из коллекции и добавить или удалить строки либо столбцы. Вот как это сделать:

На планшете с Android в файле Office выберите, где нужно вставить таблицу, а затем последовательно коснитесь пунктов Вставка > Таблица.

На телефоне с Android в файле Office выберите, где нужно вставить таблицу, коснитесь значка Правка 5f369dc7 92f3 4b49 ba4f 02ece2a59ed0и выберите команды Главная > Вставка > Таблица.

Вкладка Таблица выглядит так:

На планшете с Android

c7a8cc0e 68d8 4890 b561 6fbd1c5598eb

На телефоне с Android

beaf487d 1d64 423b bcf3 7a7bc4ea4466

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

На телефоне с Android в файле Office выберите ячейку в диапазоне, который вы хотите преобразовать в таблицу, нажмите значок редактирования 5f369dc7 92f3 4b49 ba4f 02ece2a59ed0и выберите Главная > Вставить таблицу>.

Вкладка Таблица выглядит так:

На планшете с Android

c7a8cc0e 68d8 4890 b561 6fbd1c5598eb

На телефоне с Android

beaf487d 1d64 423b bcf3 7a7bc4ea4466

В файле Office нажмите в любом месте таблицы, а затем на вкладке Таблицы выберите команду Вставка.

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

e063f0f1 2873 4bff 96fa 586d797f1527

В файле Office коснитесь столбца или строки, которые требуется удалить, а затем на вкладке Таблицы выберите команду Удалить.

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

7f3a1d7f 6ce2 4838 8927 90c0910d39b2

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

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

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

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

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

14f66085 ca40 485a 8cf6 ac5765d93822

На iPad в файле Office выберите, где нужно вставить таблицу, а затем последовательно коснитесь пунктов Вставка > Таблица.

На iPhone в файле Office выберите, где нужно вставить таблицу, коснитесь значка Правка 5f369dc7 92f3 4b49 ba4f 02ece2a59ed0и выберите команды Главная > Вставка > Таблица.

Вкладка Таблица выглядит так:

86bfc9e0 df77 43bc 9d2b 290ff8b61697

55f5279b d923 4871 9efb 6592e7941bda

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

На iPhone в файле Office выберите ячейку в диапазоне, который вы хотите преобразовать в таблицу, нажмите значок редактирования 5f369dc7 92f3 4b49 ba4f 02ece2a59ed0и выберите Главная > Вставить таблицу>.

Вкладка Таблица выглядит так:

86bfc9e0 df77 43bc 9d2b 290ff8b61697

55f5279b d923 4871 9efb 6592e7941bda

В файле Office нажмите в любом месте таблицы, а затем на вкладке Таблицы выберите команду Вставка.

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

5e729a03 934b 4176 bbfd 92aa84be9e94

В файле Office коснитесь столбца или строки, которые требуется удалить, а затем на вкладке Таблицы выберите команду Удалить.

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

5a7d6776 0bd4 4838 9619 14bdfca3bcc6

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

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

215133aa 29b1 4956 b801 d2f297cdc413

На планшете с Windows в файле Office выберите, где нужно вставить таблицу, а затем последовательно коснитесь пунктов Вставка > Таблица.

На телефоне с Windows в файле Office выберите, где нужно вставить таблицу, коснитесь пункта Дополнительно 208ef1ac 60e0 44f1 a375 d1e2ad3bb92fи последовательно выберите команды Главная > Вставка > Таблица.

Вкладка Таблица выглядит так:

На планшете с Windows

fe46654d b032 45ff a68a 85d0787d91fa

На телефоне с Windows

92998123 b020 4e5c ba8c 647dce961b18

В файле Office нажмите в любом месте таблицы, а затем на вкладке Таблицы выберите команду Вставка.

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

a9d5ee48 8f21 4a70 bbea 69c909dffeae

В файле Office коснитесь столбца или строки, которые требуется удалить, а затем на вкладке Таблицы выберите команду Удалить.

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

d28ca2b7 f5dd 4b79 bad5 dd45145cfbe4

С помощью команды Замещающий текст можно добавить замещающий текст в таблицу.

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

На планшете с Windows на вкладке Таблица нажмите значок Размер ячейки, а затем выберите Замещающий текст. На телефоне с Windows просто коснитесь значка Замещающий текст.

Введите название и описание таблицы.

56b6ebef 65f1 4a9a a4ae 8b80e1fafcb3

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

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

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

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

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

daa65e2f 7fcf 443e af07 78213e0693db

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

Источник

10 приложений для работы с электронными таблицами на Android

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

Сегодня есть множество подобных приложений и для пользователей мобильных. Конечно, наиболее значимыми фигурами в этой области остаются Microsoft Excel и Google Sheets. Их мы рекомендуем практически всем.

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

AndrOpen Office

Цена: Бесплатно.

image 106

AndrOpen Office — это первая официальная мобильная версия OpenOffice. Приложение включает в себя: текстовый редактор, инструменты для работы с электронными таблицами и презентациями и некоторые дополнительные функции. С его помощью вы можете даже рисовать и считать. Но мы-то ведём речь об электронных таблицах.

Этот инструмент в AndrOpen Office на удивление хорош и функционален, особенно с учётом того, что это мобильное приложение. Вы можете импортировать файлы Microsoft Excel (XLS и XLT), что делает переход с Microsoft Office сравнительно простым и безболезненным. В целом, AndrOpen Office — отличная альтернатива решениям от Google и Microsoft.

Docs To Go

Цена: Бесплатно / до 1 390 рублей.

image 107

Docs To Go — неплохой вариант мобильного офиса. Он включает в себя наиболее значимые элементы, в том числе инструменты для работы с текстами, презентациями и электронными таблицами. Последний поддерживает файлы Microsoft Office Excel, легко настраивается и пригоден для многих относительно простых задач. Электронные таблицы от Docs To Go могут похвастаться наличием 111 различных функций, включая различные настройки столбцов и сортировку.

Google Sheets

Цена: Бесплатно.

image 108

Google Sheets — один из двух крупнейших конкурентов в области электронных таблиц на мобильных устройствах. Он обладает множеством функциональных возможностей: подключается к Google Диску, имеет кроссплатформенную поддержку (через интернет), совместим с файлами Microsoft Office. Многим пользователям особенно нравятся его возможности совместной работы: несколько человек могут одновременно работать с одной и той же таблицей в режиме реального времени. Кроме того, Google Sheets может похвастаться множеством функций и настроек.

Конечно, Excel является более мощным приложением для работы с электронными таблицами, но зато Google Sheets намного доступнее и проще для новичков. Приложение совершенно бесплатно и может использоваться с Google Drive, где вам бесплатно будут доступны 15 ГБ пространства.

Microsoft Excel

Цена: Бесплатно / до 339 рублей.

image 109

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

OfficeSuite

Цена: Бесплатно / до 3 899 рублей.

image 110

OfficeSuite — один из интереснейших конкурентов Microsoft Office и Google Drive для мобильных устройств. Он существует уже давно и обзавёлся множеством функций. С точки зрения удобства использования, это приложение удивительно хорошее, хотя в бесплатной версии имеется лишь самый необходимый минимум функций.

Подписка стоимостью 3 899 рублей в год избавит вас от рекламы, добавит 154 формата документов и откроет два десятка дополнительных функций. Хорошая новость заключается в том, что лицензия пригодна и для мобильных устройств (Android и iOS), и для ПК, поэтому заплатить вам придётся только один раз.

Polaris Office

Цена: Бесплатно / до 3 190 рублей.

image 111

Polaris Office — ещё одна более старая и более доработанная альтернатива для Microsoft Office и Google Drive. Это приложение существует, кажется, целую вечность и имеет множество функций. С его помощью вы можете использовать электронные таблицы для разных целей, включая построение графиков.

Polaris Office имеет приятный и довольно современный интерфейс в стиле Material Design. Увы, приложение содержит ошибки, в противном случае его можно было бы считать очень хорошим вариантом.

image 112

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

SmartOffice

Цена: Бесплатно.

image 113

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

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

Table Notes

Цена: Бесплатно / до 1 499 рублей.

image 114

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

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

WPS Office

Цена: Бесплатно / до 29 990 рублей.

image 115

WPS Office долгое время считался лучшим бесплатным офисным приложением. Оно и в наши дни бесплатно, но за некоторые дополнительные функции (и удаление рекламы) вам придётся заплатить путём приобретения подписки. WPS Office — пакет с множеством различных функций, поддержкой Microsoft Excel и интеграцией со Slack, Zoom и Google Drive.

Большинство жалоб пользователей связано с рекламой в бесплатной версии. Жалобы оправданы, потому что реклама действительно раздражает, но в остальном приложение работает без нареканий, выполняя всё то, что обещано разработчиком.

Источник