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

База знаний uCoz

17 марта 2014 года произошло обновление визуального редактора материалов:

s0587637

Навигация по инструкции:

Ответы на частые вопросы

В: Меня совершенно не устраивает новый редактор и я во что бы то ни стало хочу вернуть старый теплый ламповый редактор, как мне это сделать?

s71066770

В: Мне совершенно не нравится, что новый редактор добавляет форматирование при помощи тега p, это добавляет лишние отступы, как это убрать?

О: Тег p (абзац) как раз предназначен для форматирования текста, его применение логично и правильно. Да, отступы стали больше, но это тоже нормально и логично. Если вам они очень мешают, то опция «Для перевода строк использовать тег
вместо

s91521564

В: В новом редакторе у меня пропал режим BB-кодов, почему?

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

s39877212

Работа с картинками

При вставке картинки в визуальный редактор появляется окно «Свойства изображения» с двумя вкладками: Данные об изображении и Ссылка:

7378976

Данные об изображении

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

Ссылка

8400592

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

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

s5879006

От этого не поменяется

Сейчас картинка располагается слева от текста

и красиво смотрится в большом тексте, благодаря обтеканию.

FAQ

В: Как изменить цвет границы у картинки?

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

9049389

(Цвет текста) и выбрать цвет границы.

В: Как перемещать картинку и сделать ее по центру?

Работа с текстом

Абзац, Перенос строки, Красная строка (Добавить отступы), Убрать красную строку (Убрать отступы), Нумерованный список, Маркированный список, Полужирный, Курсив, Подчеркнутый, Зачеркнутый, Подстрочный индекс, Надстрочный индекс, По левому краю, По центру, По правому краю, Специальные символы.

s3840719

s8710298

Исходный HTML-код выглядит следующим образом:

Добавление текста в новый визуальный редактор

Следующий абзац (Enter) Перенос строки (Shift+Enter)

Также можно начинать новый абзац с красной строки

Следующий абзац начинается с красной строки (с отступом), но отступ легко убирается

Еще можно выделять в тексте нужную и ненужную информацию и работать с формулами: H2O и x 2 +2x-1=0

Заголовки, Шрифт, Размер, Цвет, Цитата

s4312873

Исходный код:

Разнообразить скучный текст красивыми
Ц
В
Е
Т
А
М
И и ШРИФТАМИ очень легко

Заголовок 1 h1

Заголовок 2 h2

Если вам не понравилось то, как вы форматировали текст (изменили шрифт, цвет, размер и т.д.), то вы можете выделить этот текст и нажать на кнопку «Убрать форматирование»

5586325

3143489

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

1463982

«Вставить из Word», которая помогает избавиться от лишнего «мусора» при вставке текста.

Специальные символы

5520029

Вставка специальных символов позволяет использовать дополнительные символы в тексте. В HTML предопределено большое количество спецсимволов. Ознакомится со всеми можно на странице Мнемоники в HTML

0352175

s3238707

FAQ

В: В новый визуальный редактор не вставляется текст, нельзя скопировать и вырезать текст. Что делать?

О: Настройки безопасности вашего браузера не разрешают редактору напрямую обращаться к буферу обмена. Поэтому используйте сочетание клавиш: Вставить (Ctrl/Cmd+V), Скопировать (Ctrl/Cmd+С), Вырезать (Ctrl/Cmd+X).

Работа со ссылками

После нажатия на иконку добавления ссылки вы увидите окно, в котором 3 вкладки: Информация о ссылке, Цель и Дополнительно

Информация о ссылке

2468012

3505487

Дополнительно

8158683

HTML код добавленной ссылки:

Примечание: Можно сначала написать название ссылки, выделить его, а потом нажать на кнопку «Вставить ссылку»

Редактирование/Удаление ссылки

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

3769636

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

del link

Якоря

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Например, якоря использовались при написании данной инструкции по обновленному визуальному редактору (Навигация по инструкции).

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

s1911215

Теперь нужно создать ссылку для перехода к якорю

0342081

Якорь создан!

s1006090

HTML-код текста с якорем:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius diam in lacus sollicitudin faucibus. Quisque scelerisque lacus et orci pretium malesuada. Cras pharetra eros eu erat consequat condimentum.

Nunc nulla odio, dignissim sit amet consequat id, consectetur eu enim. Duis elementum mauris ut ante pellentesque laoreet. Ut porttitor, risus et sodales eleifend, elit tellus placerat leo, tempus fringilla massa elit et arcu.

Удалить/изменить якорь

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

4530769

Работа с таблицами

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

2763457

После заполнения нужных полей получаем пустую таблицу:

s4208472

Которую можно заполнять:

s7719443

HTML код созданной таблицы:

Заголовок таблицы

Заголовок столбца1 Заголовок столбца2
Данные столбца1 Данные столбца2
Данные столбца1 Данные столбца2

Для того, чтобы редактировать таблицу (добавлять/удалять/объединять ячейки, колонки, строки и т.д.) нужно нажать по таблице правой кнопкой мыши:

s5376010

Свойства ячейки

3958327

Работа с Flash

8060771

Flash. После появляется окно Свойства Flash с тремя вкладками: Основное, Свойства и Дополнительно:

Основное

4629589

Свойства

5625402

Дополнительно

1388566

Так будет выглядеть вставленный в редактор Flash:

s1371432

Для того, чтобы внести изменения нужно кликнуть по добавленному Flash правой кнопкой мыши и выбрать «Свойства Flash»

s2378236

Добавление видео с YouTube

Добавить видео с сайта YouTube в визуальный редактор можно двумя способами через вставку HTML- кода или ссылки на видео.После нажатия в визуальном редакторе на иконку7570440(Вставить YouTube видео) появляется такое окно:

s5876986

1 способ. Вставка HTML-кода

Под видео на сайте YouTube нажмите Share (Поделиться), затем Embed (Вставить)

s1461494

Скопируйте сгенерированный код и вставьте его в первое поле:

s5418288

2 способ. Вставка адреса видео (URL)

Скопируйте из адресной строки браузера ссылку на видео:

s7415916

Ссылка на видео вставляется во второе поле:

s0374818

Можно так же указать желаемую Ширину и Высоту в пикселях.Так будет выглядеть вставленное в редактор видео с YouTube:

s4453694

Дополнительные функции

Отменить/Повторить

2937298

Кнопки «Отменить» и «Повторить» используются для отмены, либо повтора предыдущего действия. Например, если вы случайно удалили абзац текста, то его можно вернуть нажатием кнопки «Отменить». Аналогом этой функции является сочетание горячих клавиш Ctrl/cmd + Z

Иcточник

1995686

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

Источник

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

excel tabl

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

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

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

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

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

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

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

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

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

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

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

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

ckeditor tabl

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

voistva tabl

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

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

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

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

opros

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

opros id ok

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

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

opros id

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

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

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

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

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

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

generator html

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

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

generator tabl

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

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

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

excel tabl

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

excel tabl gener

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

excel tabl copy

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

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

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

excel tabl shirok

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

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

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

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

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

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

otkryt dostup faylu

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

sovmestnyy dostup

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

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

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

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

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

otkryt v prilozhenii

publikatsiya tablitsy v internete

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

vstroit tablitsu

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

Примечание : Единственное, что еще можно добавить, это размеры width=»100%» height=»480″, как на снимке ниже, чтобы корректно отображалась таблица на сайте.

dobavit razmery

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

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

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

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

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

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

tabl onedrive

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

excel tabl onedrive

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

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

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

Источник