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

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

Способ №1: Вставить на сайт таблицу, подготовленную в Word

Этот способ подходит для таблиц любого размера. Сначала скопируйте из текстового редактора таблицу, которую вы хотите поместить на сайт (для копирования воспользуйтесь сочетанием клавиш Ctrl+С или правой кнопкой мыши). Необходимо выделить и скопировать таблицу целиком, а не только текст в ячейках.

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

Перед вами появится диалоговое окно. Вставьте таблицу в него, пользуясь сочетанием клавиш Ctrl+V или правой кнопкой мыши. После вставки нажмите кнопку «OK».

Система поинтересуется, желаете ли Вы очистить формат текста перед вставкой на сайт. Вы ведь знаете, для чего следует очищать текст перед публикацией на сайте? Если знаете, то подтвердите действие кнопкой «OK».

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

Способ №2: Создать таблицу на сайте с помощью текстового редактора

Этот способ подходит для небольших таблиц. При его использовании вам не придется копировать таблицу: вы с нуля создадите ее в текстовом редакторе.

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

Затем кликните мышкой на значок таблицы в верхнем меню.

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

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

Таблица с пустыми ячейками будет добавлена.

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

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

Добавление таблиц, как правило, вызывает у наших клиентов много вопросов. Если вы остались недовольны тем, как опубликована таблица, вы можете отредактировать ее или опубликовать ее заново с помощью программы «Реформатор».

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.

Решение

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

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

и

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

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

нет.
Читайте также:  Как отключить защиту биос

Пример 1. Создание таблицы

HTML5 IE Cr Op Sa Fx

Порядок расположения ячеек и их вид показан на рис. 1.

Рис. 1. Результат создания таблицы с четырьмя ячейками

Атрибут border тега

допустимо добавлять только с пустым значением (
) или равным 1. Все остальные значения не проходят валидацию.

Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0.

Пример 2. Поля внутри ячеек

HTML5 CSS 2.1 IE Cr Op Sa Fx

Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.

Эта статья будет посвящена разбору возможностей создания и вставки таблиц, в том числе таблиц 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adblock
detector