Как сделать таблицу в joomla

Добавил пользователь Владимир З.
Обновлено: 04.10.2024

Добавление таблицы на сайт с SMC Joomla

Всем доброго вечера!
Возникла необходимость добавить на сайт под управлением SMC Joomla! (про сайт я уже пару раз писал)несколько Exel'евских файлов, что бы они на нем отображались как в самом Ехеl'e. то есть нужно добавить таблицу на сайт. Вариант просто скопировать и создать материал не катит, может я что не так делаю??
Возможно таблица будет с фотографиями. Это наверное вообще завал. Просто создавать и размещать 300 материалов это сложно, а хочется что бы посетители все видели сразу,А не скачивали прайс:

PS: А еще лучше, сделать как вот Тут! ТО бишь поиск по названию и др. параметрам, кликабельная картинка для раздела, кликабельные картинки для конкретных вещей, а внутри описание.

В предыдущей статье мы определились с тем, что создавать текст материала лучше в редакторе операционной системы компьютера. Это может быть, например, Word. Но при работе с сайтом есть специфические моменты, с которыми можно работать только в редакторе Joomla. В этой статье я расскажу про основные инструменты JCE по работе с текстом, изображениями и кодом.

Хочу заметить, что JCE содержит гораздо больше инструментов, чем я описал ниже, но рассказывать о простейших функциях, знакомых из Word’а, я не считаю нужным. В статье рассказывается только про уникальные для работы с html-редактором инструменты.

JCE. Инструменты для работы с текстом.

В редакторе этот инструмент выглядит следующим образом:

При клике по кнопке выпадает подменю, содержащие две опции:

Paste – используется для вставки текста из Word’а и других редакторов. Вид редактора определяется автоматически. (В предыдущих версиях JCE кнопок вставки текста было несколько – для каждого из распространенных редакторов).
Pasteasplaintext – вставка в виде плоского текста. При использовании этой опции все символы форматирования будут удалены при вставке, т.е. получится просто сплошной текст, что-то вроде вставки в блокнот.

После выбора опции откроется окно, как на рисунке:

После этого текст с максимальным сохранением форматирования будет вставлен в JCE.

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

Последним, крайне важным инструментом, являются таблицы. К счастью, JCE текущей версии уже умеет переносить таблицы из word’а автоматически, создавая при этом весь необходимый код. Функция эта, по истине замечательная. Кто уже имеет опыт работы с html-редакторами, прекрасно понимает почему. Для остальных расскажу. Раньше, когда этой функции не было, редактор не умел автоматически создавать таблицы и вместо них вставлялся просто текст ячеек. Т.е. для вставки таблицы приходилось создавать ее вручную, а затем заново заполнять данными. И хорошо, если таблица небольшая, но ведь она могла содержать и сотню строк. Тогда работа превращалась в ужас. Никому не хотелось создавать таблицы в html-редакторе вручную. При этом стали придумываться некоторые способы полуавтоматизации. Например, был способ с копированием таблицы из word’а в Excel с хитрым преобразованием ее в html-код. Сегодня, слава Богу, все эти хитрости уже не нужны. Процесс автоматизирован. Но иногда может быть удобно создать небольшую табличку прямо в html-редакторе, так что ниже рассмотрим инструмент для создания таблиц.

При клике по ней открывается следующее окно:

Здесь мы можем установить следующие опции таблицы:

Cols – количество столбцов таблицы
Rows – количество строк таблицы

Стоит заметить, что таблицу в html можно строить только однотипную. Т.е. количество ячеек в каждой строке будет одинаково. Если вам нужно, чтобы в первой строке было, например, 2 ячейки, а во второй – 3, то сначала нужно создать таблицу 2х2, а потом, во второй строке, в одну из ячеек вставить таблицу 1х2(1 строка, 2 столбца). Не очень удобно, но ничего не поделать. Таков язык html для таблиц.

Cellpadding – расстояние от границы ячейки до ее содержимого
Cellspacing – расстояние между ячейками таблицы

Опции Cellpadding и Cellspacing для таблиц аналогичны опциям margin и padding для div’ов.

Alignment – определяет выравнивание содержимого таблицы(по левому краю, по центру, по правому краю)
Border – ширина рамки таблицы
Width – ширина таблицы
Height – высота таблицы
Class – CSS-класс, применяемый к таблице
Tablecaption – место для заголовка таблицы. Если галочка установлена, над таблицей будет создана дополнительная строка, состоящая из одной ячейки, в которой предполагается размещение заголовка таблицы

Id – уникальный идентификатор таблицы. Применяется в CSS;
Style – CSS-стиль таблицы, заданный прямо в ее коде;
Backgroundimage – изображение, которое будет использовано в качестве фона таблицы;
Border color – цвет рамки таблицы;
Backgroundcolor – цвет фона таблицы.

JCE. Инструменты для работы с кодом.

При клике по этой кнопке открывается редактор html-кода с подсветкой:

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

Плагин распространяется бесплатно и доступен здесь.

JCE. Инструменты для работы с изображениями.

Теперь перейдем, наверное, к самой интересной для web-мастеров функции JCE – вставке изображений. Эта тема действительно волнует многих, а также вызывает наибольшее количество проблем при использовании редактора.

Начнем с того, что в отличие от Word’a, в JCE, как впрочем и в любой другой html-редактор, нельзя просто так вставить изображение. Перед вставкой оно должно быть загружено на сервер в одну из папок Joomla. Это правило. Если его нарушить, изображение не будет показано. Конечно, соединяться с сайтом по FTP каждый раз, когда нужно вставить на сайт картинку, крайне неудобно. К счастью в JCE есть возможность этого не делать. Рассмотрим ее ниже.

При клике открывается следующее окно:

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

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

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

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

За один раз можно вставить только одно изображение. Если необходимо вставить сразу несколько изображений, следующих друг за другом, возможно, удобнее будет вставить одно, а затем, перейдя в просмотр html-кода, скопировать его код, вставить его и изменить имена файлов.

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

Теперь рассмотрим остальные опции:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В сегодняшнем уроке мы научимся добавлять на сайт, управляемый CMS Joomla, файлы формата pdf, webp, docx, xlsx, zip и т. д. А также рассмотрим вопрос как вставить файл в материал. То есть сделаем в материале ссылку на файл, чтобы пользователь мог, перейдя по этой ссылке, скачать документ, или архив.

К уроку прилагается видео. Посмотрев этот ролик, вы наглядно можете посмотреть, как всё выполняется на сайте Joomla с использованием редактора JCE. Но если у вас установлен по умолчанию какой-нибудь другой редактор, то принцип действий остаётся неизменным.

Также, в этом уроке, мы подробно рассмотрим каждый параметр настройки медиа-менеджера Joomla.

Видео как в Joomla прикрепить файл к материалу для скачивания пользователями

Медиа-менеджер Joomla. Настройка

По умолчанию Joomla поддерживает загрузку многих популярных форматов файлов и изображений: bmp, csv, doc, gif, ico, jpg, jpeg, odg, odp, ods, odt, pdf, png, ppt, txt, xcf, xls. Но как видите, загрузка современных форматов файлов, таких как webp, docx, или xlsx в Joomla по умолчанию не поддерживается. Так как же реализовать возможность загрузки этих форматов файлов на сайт? Давайте я опишу всё пошагово.

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Давайте ещё более подробно рассмотрим каждый параметр настройки медиа-менеджера Joomla и разберёмся для чего предназначен и за что отвечает каждый пункт этих настроек:

Проверять тип файла (MIME) (Check MIME Types): При этом используется MIME Magic или Fileinfo для проверки файлов. Значением по умолчанию является Да. Проверяя информацию MIME, вы помогаете пользователям не загружать вредоносные файлы на ваш сайт. Если получены недопустимые ошибки типа MIME, измените настройку на Нет.

Разрешённые расширения изображений (Legal Images Extensions): Это позволяет вам ограничивать типы изображений, которые могут быть загружены. Он работает путем проверки заголовков файлов изображений. По умолчанию Joomla! позволяет только BMP, GIF, JPG, PNG.

Запрещённые расширения файлов (Ignored Extensions): устанавливает, какие расширения игнорируются при проверке типа MIME и ограничивает загрузку. По умолчанию никакие расширения не игнорируются.

Разрешённые типы файлов (MIME) (Legal MIME Types): устанавливает список допустимых типов MIME для загрузки. По умолчанию Joomla автоматически включает некоторые стандартные типы файлов. Рекомендуется не трогать этот параметр, если вы не знаете, что делаете.

Недопустимые типы файлов (MIME) (Illegal MIME Types): устанавливает список недопустимых типов MIME для загрузки. По умолчанию Joomla автоматически блокирует типы text/html. Рекомендуется не трогать этот параметр, если вы не знаете, что делаете.

Читайте также: