Таблица для сайта. Сделать/вставить таблицу

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

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

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

Итак, начнем…

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

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

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

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

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

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

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

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

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

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

Вставить таблицу на сайт с помощью ckeditor

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

Свойства таблицы

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

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

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

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

Вставить опрос на сайт

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

ID опроса

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

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

Опросы

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

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

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

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

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

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

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

Сайт для создания таблиц

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

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

html код таблицы

Вот еще один русскоязычный генератор html таблиц для сайта:

русскоязычный генератор html таблиц для сайта

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

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

онлайн генератор таблицо для сайта

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

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

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

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

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

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

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

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

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

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

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

сгенерировать html код таблицы

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

копируем готовый код таблицы

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

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

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

большая excel таблица на сайте

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

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

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

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

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

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

Загружаем в Гугл Диск нужный нам файл с таблицей:

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

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

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

Можно скопировать ссылку и разместить на сайте, например, так:

Расписание Саратовского автовокзала (нажмите для просмотра)

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

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

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

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

Встроить таблицу на сайт

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

код таблицы для сайта

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

Примечание: Обратите внимание, что по умолчанию установлены размеры того, какая ширина и высота будет у окна, в котором будет находиться таблица. Так что в зависимости от размеров сайта, можно изменять размеры и отображения таблицы. А если сайт адаптивный, то можно указать width (ширину) вообще 100%.

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

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

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

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

Пример таблицы во всю ширину и высоту 480 рх
Пример таблицы с шириной 90% и высотой 480 рх
Пример таблицы с шириной 80% и высотой 200 рх

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

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

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

Добавить таблицу через onedrive

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

Дополнительные настройки встраивания таблицы onedrive

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


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

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

Обсуждение: 9 комментариев

  1. А будут ли индексироваться данные в гугл таблице, встроенной в сайт? То есть поиск будет выдавать такие страницы?

    Ответить
    1. Константин:

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

      Ответить
  2. Спасибо, очень интересно и полезно!
    Первый раз делаю сайт и пробовала несколько плагинов, столкнулась с ограничениями TablePress — не выделяет границы ячеек и бледный цвет фона верхней строки. Возможно, предложенные вами способы уберут эти недостатки

    Ответить
  3. Валерий:

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

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

    Можете что-то посоветовать?

    Ответить
    1. Константин:

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

      Ответить
  4. Добрый день! В начале своей статьи Вы описывали создание таблиц при помощи Генератор HTML кода таблицы, получили код, а куда его вставлять? На страницу где хочу отобразить свою таблицу, да? Или вставлять в редактор своего сайта? Объясните.

    Ответить
    1. Константин:

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

      Ответить
  5. Роман:

    подскажите пожалуйста, а способ описаный в статье, подойдет ли для WIX?

    Ответить
    1. Константин:

      В статье описаны разные варианты. Опытным путем выясняется какой из способов будет лучше подходить и для WIX. Попробуйте!

      Ответить

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

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

© 2017 INFODIO.RU // ИП Герцев Константин Александрович, ОГРН 309333808200021