Таблицы excel в joomla

Думаю, что многие владельцы сайтов сталкиваются с необходимостью представления данных на своём сайте в виде таблицы. В редакторе материалов Joomla есть различные инструменты, которые позволяют создать и оформить таблицу. Но этих средств может не хватать, если Вы хотите красиво оформить таблицу, дать возможность Вашим пользователям сортировать в ней данные по столбцам, адаптировать её под мобильные устройства, добавить график по значениям, красиво оформить прайс лист и др. Безусловно, всё это можно сделать при помощи HTML и CSS, но если Вы в достаточной мере не владеете данными языками, тогда Вам поможет Droptables.

В обзоре будет участвовать последняя на момент написания статьи (07.04.2015) русскоязычная версия Droptables 2.0.1 в Joomla 3.4.1 (редактор TinyMCE 4.1.7), шаблон сайта «Protostar».

Основные возможности

Рассмотрим основные возможности компонента таблицы Joomla.

  • Создание и управление таблицами отдалённо напоминает редактор таблиц Excel.
  • 6 встроенных тем оформления.
  • Управление таблицами из любого редактора материалов.
  • Автоматическое сохранение и отмена действий на основании AJAX.
  • Возможность сортировки данных таблиц во фронтальной части сайта.
  • Создание графиков на основании данных таблиц. 6 типов графиков (диаграмм) с настройками: гистограмма, круговой, кольцевой, лепестковый и так далее.
  • Изменение размера столбцов и строк перетаскиванием мыши.
  • Копирование ячеек при помощи перетаскивания.
  • Копирование всей таблицы в одно нажатие.
  • Редактор ячейки, столбца, строки (WYSIWYG) с возможностью изменения форматирования её содержимого, добавления изображений и ссылок.
  • Импорт/экспорт данных Excel.
  • Импорт из CSV,
  • Возможность разделения таблиц на категории в Droptables для упрощения работы с ними.
  • Управление таблицами Joomla 3 из административной и фронтальной части сайта.
  • Возможность изменять стили границ.
  • Возможность объединения, вставкиудаления строк и столбцов.
  • Возможность редактирования CSS-кода оформления таблицы прямо в редакторе.
  • Возможность вставки таблиц в модуль Joomla «HTML-код». Достаточно включить опцию Обрабатывать плагинами в модуле на вкладке Основные параметры.
  • Тип отзывчивости, позволяющий отображать на маленьких экранах только наиболее приоритетные столбцы таблицы.
  • Поддержка K2.
  • Поддержка Joomlaх.

Также стоит отметить наличие документации и технической поддержки на английском языке. Сам компонент (по состоянию на 08.04.2015) доступен на русском, украинском, английском, французском, немецком и португальском языках. А также частично переведен на польский и испанский.

Красивые таблицы Joomla

Приведу примеры таблиц и графиков, которые сделаны при помощи Droptables.

Droptables Таблицы Joomla 3 Прайс лист Joomla Красивые таблицы Joomla Красивые таблицы Joomla (1) Красивые таблицы Joomla (2)

«Живые» примеры данных таблиц и графиков можно посмотреть на демонстрационном сайте разработчика.

Таблицы Joomla 3

Доступ к компоненту таблиц Joomla можно получить прямо из редактора, нажав на кнопку Таблицы – Droptables (рисунок ниже).

Таблицы – Droptables

Внутри редактора Вы видите серую область – это признак вставленной при помощи Droptables таблицы. По нажатию на кнопку Таблицы – Droptables появится редактор таблиц (рисунок ниже).

Компонент таблиц Joomla

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

  1. Удалить. Данный инструмент доступен и для категории таблиц Joomla.
  2. Копировать. Копирует таблицу внутри категории
  3. Переименовать. Данный инструмент доступен и для категории.

Управление таблицами

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

Создание таблицы

При нажатии правой кнопки мыши на ячейку появится контекстное меню (рисунок ниже).

  • Insertrowabove. Вставить строку над выделенной ячейкой.
  • Insertrowbelow. Вставить строку под выделенной ячейкой.
  • Insert column on the left. Вставить столбец слева от выделенной ячейки.
  • Insert column on the right. Вставить столбец справа от выделенной ячейки.
  • Removerow. Удалить строку, в которой находится выделенная ячейка.
  • Removecolumn. Удалить столбец, в которой находится выделенная ячейка.
  • Undo. Отменить предыдущее действие.
  • Margecells. Объединить выделенные ячейки (для этого необходимо выделить несколько ячеек).

Нажимая на заголовки столбцов (буквы) или на заголовки строк (цифры) можно выделить весь столбец или всю строку соответственно.

Контекстное меню ячейки

Вычисления в таблицах Joomla 3 напоминают Excel. Доступны такие функции:

  • SUM. Суммирует числа. Например: «=SUM(A1:A5)» (без кавычек, разделитель двоеточие) – просуммирует все числа в диапазоне от A1 до A5 выражение «=SUM(A1;A5)» (без кавычек, разделитель точка с запятой) просуммирует два числа (первое из ячейки «A1», а второе из «A5»). Разделитель «:» – указывает на диапазон от и до, а «;» на отдельные ячейки. В левой части на рисунке ниже показан пример ввода формулы, а в правой – результат расчётов.

Пример расчётов в таблице

  • COUNT. Функция COUNT (счёт) подсчитывает количество ячеек, содержащих числа. Например, для вычисления количества чисел в диапазоне «A1:A20» можно ввести следующую формулу: «=COUNT(A1:A20)» (без кавычек). Если в данном примере пять ячеек из диапазона содержат числа, то результатом будет значение «5».
  • CONCAT. Объединяет значения ячеек по «правилу»: слева направо, сверху вниз. Например: «=CONCAT(A1:B3)» даёт результат «82569» (рисунок ниже). Так как числа 8, 2, 5, 6, 9 стоят в указанном диапазоне и расположены слева направо, сверху вниз.

Объединение значений

  • MIN. Поиск минимального значения.
  • MAX. Поиск максимального значения.
  • AVG. Среднее арифметическое.

В правой части Droptables доступны такие вкладки:

Рассмотрим вкладку Таблица (рисунок ниже).

Таблица

  • №1 вставляет выбранную Вами таблицу из доступных стилей №2.
  • №2 доступные стили таблиц. Обратите внимание, когда у Вас в области таблицы уже есть данные, применив к ним тему, они не заменятся демонстрационными, а если данных нет, то применятся демонстрационные с возможностью их редактирования.
  • №3 Заливка нечётных строк. Цвет заливки нечётных строк таблицы Joomla 3 (рисунок ниже).
  • №4 Заливка чётных строк. Цвет заливки чётных строк таблицы (рисунок ниже). При помощи этой опции и опции №3 можно создать «зебру». Добавляя строки и столбцы, они будут перекрашиваться в заданный Вами цвет.
Читайте также:  Как подключить font awesome в css

«Зебра»

  • №5 Использовать таблицу с сортировкой. Если выбрать Да, пользователи во фронтальной части сайта смогут сортировать данные в таблице по столбцам.
  • №6 Выравнивание. Выравнивание таблицы По центру, Слева, Справа или без выравнивания. Не путать с выравниванием содержимого ячеек таблицы
  • №7 Тип отзывчивости. Если выбрано Прокрутка, будет появляться горизонтальная полоса прокрутки при нехватке ширины на странице для отображения таблицы. Это, например, весьма актуально для прайс листов в Joomla на маленьких экранах (мобильные устройства). Если выбрано Скрытие столбца, то на узких экранах будут автоматически скрыты лишние столбцы и во фронтальной части сайта появится специальный элемент управления рядом с таблицей (рисунок ниже). Нажав на этот элемент, перед пользователем появится список всех доступных столбцов. Он может сам выбрать, какие из них скрывать, а какие отображать. Также Вы сами можете указать приоритет отображения каждого столбца. Для этого служат опции Столбец и Приоритет отзывчивости на вкладке Ещё (рассмотрено ниже в данной статье).

Скрытие столбца

Формат

Рассмотрим вкладку Формат (рисунок ниже). На данной вкладке компонент таблиц Joomla предоставляет ряд элементов для визуального оформления содержимого ячеек и их границ.

Формат

  • №1 Тип ячейки. Может быть По умолчанию – ввод значений или формул, а может быть Html. Если выбран второй вариант, при нажатии на ячейку откроется специальный редактор (рисунок ниже).

Редактор ячейки

Он немного напоминает стандартный режим TinyMCE и позволяет вставить и отформатировать (задать начертание, отступы, выравнивание, стиль, гарнитуру, размер и цвет текста) внутри ячейки различное содержимое: текст, изображения, ссылки, нумерованные и маркированные списки. Также вставить фрагмент произвольного HTML кода (нажав на кнопку Source).

  • №2 Цвет фона ячейки. Позволяет указать цвет заливки ячейки.
  • №3 Границы. Droptables позволяет Вам указать внешний вид границы: Сплошные, Пунктирные, Штрихпунктирные, Без границы.
  • №4 позволяет задать цвет границ таблицы Joomla 3.
  • №5 позволяет задать толщину границ прайс листа Joomla.
  • №6 – при помощи этой группы инструментов можно указать, к каким границам применять опции №3, 4 и 5. То есть, сперва Вы выделяете в таблице те ячейки, которым хотите задать границу, затем из №3 выбираете тип границы, в №4 задаёте её цвет, в №5 указываете её толщину, а потом нажимаете на один из инструментов в области №6 и применяете указанное в №3, 4 и 5 форматирование к тем «частям границы», которые отображены на инструментах №6. Например, нажав на левый верхний инструмент, Вы примените форматирование только к верхней границе ячейки.
  • №7 Шрифт. Позволяет сменить гарнитуру шрифта содержимого ячеекячейки. Доступно девять шрифтов: Arial, Times New Roman, Verdana и др.
  • №8 при помощи данного инструмента компонент таблиц Joomla позволяет Вам задать цвет текста содержимого ячейки.
  • №9 размер текста (кегль).
  • №10 инструменты для изменения начертания шрифта: жирный, подчёркнутый, курсив.
  • №11 инструменты для изменения выравнивания содержимого ячейки по горизонтали и вертикали.
  • №12 Высота строки в пикселях.
  • №13 Ширина строки в пикселях.

Как видите, настроек достаточно много. Но это не все доступные в арсенале Droptables опции. Перейдём к рассмотрению вкладки Ещё.

Таблицы Excel и Joomla

Как уже упоминалось ранее, Droptables позволяет производить импортэкспорт между Excel и Joomla 3. Для этого служат инструменты на вкладке Ещё (рисунок ниже).

Excel Joomla 3

  • №1 ИмпортExcel. Позволяет импортировать таблицу из Excel в Joomla 3. Помимо XLS и XLSX поддерживается CSV и ODT (OpenDocument). Обратите внимание, что при импорте могут быть «искажения» (неточности). Всё зависит от сложности импортируемых данных. Также обратите внимание на то, что при импорте их Excel будут взяты данные только с первого листа файла.
  • №2 Экспорт Excel. Позволяет экспортировать данные из Droptables в XLSX. Обратите внимание, что при экспорте могут быть «искажения» (неточности). Всё зависит от сложности экспортируемых данных.
  • №3 Столбец. Если на вкладке Таблица для опции Тип отзывчивости выбрано Скрытие столбцы, тут можно указать, для какого столбца в таблице Вы задаёте приоритет из списка №4 Приоритет отзывчивости.
  • №4 Приоритет отзывчивости. Указывает насколько важным является отображение того или иного столбца, выбранного в списке №3 Столбец. Где «0» – приоритет не задан вручную; «1» – наименее важный, «2, 3, …» – важность возрастает с увеличением порядкового номера; Persisent – необходимо обязательно показать данный столбец. Например, если у Вас есть прайс лист Joomla, где в столбце «A» – наименование товара, в «B» – артикул, в «C» – описание, в «D» – цена, и Вам нужно обязательно отобразить наименование товара и его стоимость даже на экране телефона, то для столбца «A» (наименование товара) нужно задать приоритет Persisent, для «D» (цена) – «4», для «C» (описание) – «3», а для «B» можно ничего не задавать. В таком случае, пользователь даже на очень маленьком экране увидит название и стоимость товара.Если будет место, появится и описание, а если места будет много, то увидит все столбцы.
  • №5 Отступы. Droptables позволяет задать верхний, правый, нижний и левый отступы от содержимой ячейки до её границ.
  • №6 Радиус скругления фона ячеек. Если Вы задавали фон ячейки, то при помощи данной группы опций Вы можете задать радиус скругления каждого из углов фона ячейки (рисунок ниже).

Скругление фона

  • №7 НастраиваемыйCSSдля этой таблицы. Вы можете добавить произвольный CSS-стиль к элементам таблицы.

Выяснить нужные классы стилей можно при помощи встроенных или сторонних средств для разработчиков в браузере. На рисунке ниже это Firebug 2.0.9 в Mozilla Firefox 37.0.1.

CSS-код

«r» – строки, «c» – столбцы.

Графики

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

График

Доступны такие виды графиков (диаграмм) как (по аналогии с Excel): «С областями», «Гистограмма», «Заполненная лепестковая», «Полярные области», «Круговая», «Кольцевая» – на рисунке выше они расположены слева направо, сверху вниз.

  • Переключить Строка/Столбец. При помощи данной опции компонент таблиц Joomla позволяет Вам выбрать, какие данные должны быть по оси Х, а какие по оси Y (элементы ряда и подписи оси соответственно). Доступно Строка или Столбец. В моём примере, если выбрать Строка, то по оси Х (подписи) будут месяцы, а по оси Y (сами столбцы) будут значения принятых отданных и потерянных пакетов данных. По три столбца на каждый месяц (Принято, Отдано, Потери).
  • Использовать первую/первый строку/столбец в качестве заголовка. Если Вы выбрали Да, то под графиком появятся подписи из первой строки таблицы. В моём примере по оси Х (подписи) будут месяцы.
  • Ширина, Высота. Ширина и высота области графика в пикселях.
  • Выравнивание. Выравнивание области графика на странице (По центру, Справа, Слева, Нет).
  • Набор данных. Содержит список столбцовстрок таблицы (в зависимости от параметра, выбранного для опции Переключить Строка/Столбец), по которым строится график. Выбрав один из них, можно задать ему цвет при помощи опции Цвет, расположенной ниже.
Читайте также:  Beckers elegant vaggfarg helmatt отзывы

Русификатор Droptables

Как видите, Droptables весьма функциональный компонент таблиц Joomla 3 при помощи которого достаточно просто можно сделать функциональный и красивый прайс лист или любую другую таблицу.

Добавьте расширение к себе на стену, чтобы не забыть:

Droptables – единственный табличный менеджер Joomla, который предлагает реальный интерфейс электронной таблицы, подобный интерфейсу Excel и листам Google. Плюс, всеми таблицами можно управлять из Вашего редактора. Составьте таблицу, примените некоторые действительно красивые темы оформления и начните работать с содержимым. Копирование таблиц, категории таблиц, некоторые функции вычисления находятся внутри. Поскольку Droptables полностью управляется из Вашего редактора, он работает и во frontend и в бэкенд так же. Вы можете оформить страницы Вашего сайта с помощью различного вида таблиц, например выводить отформатированный контент SVCAR , выводить сводные таблицы и многое другое/

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

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

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

Далее посмотрим, как вставить на сайт таблицу из уже готового файла Excel. И в завершении создадим адаптивные таблицы для сайта с помощью сервисов Гугл и Onedrive, чтобы вставлять на сайт таблицы excel любого размера.

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

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

Плагины для создания и вставки таблиц на сайт

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

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

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

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

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

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

Удобно, — ставим курсов в том месте текста, где нужно создать и вставить таблицу, нажимаем на значок таблицы, как показано на снимке выше и с помощью всплывающего окна настраиваем нужную нам таблицу:

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

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

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

Вот, к примеру, есть плагин WP-Опросы для удобного создания и ведения опросов на сайте. При установке он автоматически встраивает кнопку Вставить опрос :

При нажатии по кнопке появляется дополнительное окно, в котором можно просто поставить ID опроса и нажать ОК :

Опрос вставится в то место страницы, где стоял курсор.

А узнать ID опроса можно в разделе, где находятся все созданные опросы:

Достаточно удобно! Но, при добавлении расширенного редактора CKEditor данная кнопка не работает, т.е. не выводит всплывающее окно (по крайней мере, в некоторых темах).

Читайте также:  Цифровое телевидение в автомобиле

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

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

И, что касается создания и вставки таблиц, так уж ли необходимо использовать плагины или можно воспользоваться другими способами?! Рассмотрим другие способы.

Сайты для создания таблиц. Генераторы таблиц

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

Вот один из таких бесплатных сайтов для создания таблиц: Генератор HTML кода таблицы :

Генератор кода таблицы на русском языке, так что быстро разобраться не составит труда: выставили необходимые настройки, посмотрели ( 1 ), если все подходит, Сгенерировали код ( 2 ), скопировали, вставили на сайт и заполнили ячейки необходимыми данными.

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

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

Как видно на снимке выше, в этом генераторе даже можно задавать цвет и доп. эффекты!

Если захочется поэкспериментировать с созданием таблиц и этих сервисов будет недостаточно то, вот еще несколько сервисов для создания таблиц: HTML Table Generator и Kotatsu . Эти генераторы таблиц англоязычные, но разобраться в них просто, а если еще пользоваться браузером с автопереводчиком , то вообще никаких проблем.

Красивая таблица на сайте

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

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

Как вставить таблицу Excel на сайт

Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer .

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

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

Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:

И вставляем к себе на сайт.

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

Вот как это может выглядеть:

Как видно на снимке, таблица выходит на границы сайта.

Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.

Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?

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

Но, есть более интересный способ, который рассмотрим далее.

Адаптивные таблицы для сайта через Гугл Диск

Загружаем в Гугл Диск нужный нам файл с таблицей (Создать -> Загрузить файл) и открываем доступ:

Включаем доступ по ссылке и копируем ее:

Теперь можно разместить на сайте, например, так:

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

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

Для этого нужно зайти в файл, закачанный в Гугл, и в верхней части экрана выбрать функцию Открыть в приложении «Google»:

Заходим в Меню -> Публикация в Интернете:

Копируем предоставленный код во вкладке Встроить:

И размещаем на своем сайте в нужно месте.

Примечание : Единственное, что еще можно добавить, это размеры w >

Итак, размещаем код таблицы для сайта на странице и вот что получается (воспользуйтесь вкладками и областями прокруток):

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

Улучшаем использование таблиц

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

Адаптивные таблицы для сайта через Onedrive

По аналогии сервиса Гугл Диск, встроить таблицу на сайт можно с помощью сервиса от Майкрософт Onedrive .

Загружаем таблицу, правой кнопкой мыши на файл, — выбираем Внедрение и берем для сайта код таблицы ( 1 ):

Можно также воспользоваться дополнительными настройками внешнего вида таблицы ( 2 ):

Вот как выглядит встроенная таблица на сайте с помощью сервиса Onedrive:

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *