Как вставить таблицу на сайт (из Excel в Adobe Muse)
Как вставить таблицу на сайт, составленную в программе Microsoft Excel на сайт, созданный в программе Adobe Muse с помощью онлайн сервиса по генерации таблиц.
Существует много способов преобразования и генерации HTML кода таблиц. Например, можно просто взять код таблицы прямо из файла Excel, предварительно сохранив файл как веб-страницу. Но такой код получается довольно громоздким и “грязным”.
Данный способ и сервис, который я предлагаю использовать для создания таблицы, позволит Вам взять таблицу из Excel и получить чистый и красивый код таблицы для Вашего сайта.
Смотрите это видео как вставить таблицу на сайт в Adobe Muse:
Как вставить таблицу на сайт. Подготовка.
В этом видеоуроке мы рассмотрим создание таблицы на сайте в программе Adobe Muse, точнее не создание больше, а, скорее всего, добавление таблицы на сайт в программе Adobe Muse. Таблица у меня подготовлена в программе Excel, и я хочу, например, вставить ее на свой сайт. Для этого мы будем использовать сервис генерации таблиц tablesgenerator.com. И сделаем это следующим образом.
Как вставить таблицу на сайт. Копирование таблицы на сервис.
Мы просто копируем таблицу, которую вы создали в программе Excel. Здесь вы можете не настраивать ни шрифты, ни размер шрифтом, это мы все будем делать на сайте. Просто выделяете таблицу, нажимаете «Копировать» и переходите на сайт. Здесь заходите в меню «File» и выбираете опцию «Paste table data». Как раз сюда вы и сможете вставить таблицу из программы Microsoft Excel. Нажимаем здесь «Вставить». Вставляется вот такой текст. И нажимаем кнопку «Load».
Все, наша таблица загружена на данный сервис. И здесь мы можем с ней сделать некоторые настройки.
Как вставить таблицу на сайт. Дизайн таблицы и генерация кода.
Давайте зайдем в раздел «Theme» и выберем ей какую-нибудь подходящую тему, например, я выберу вот эту синию из предложенных. И поставлю здесь границы таблицы, например, вот такие разделения колонок и строк. А также выберу здесь подсветку, например, вот эту – строки таблицы через одну будут подсвечиваться другим цветом. Пролистаю вверх, нажимаю «Закрыть», и таблица у нас достаточно уже хорошо выглядит.
Можем настроить здесь еще шрифты, например, выбрать «Verdana» или давайте «Tahoma». И выбрать размер шрифта, например, я поставлю 16. Или зайти в меню «Table» и немного добавить в таблицу «воздуха» так называемого, для того чтобы она лучше читалась и смотрелась. Выделим шапку и поставим здесь, например, жирный шрифт для шапки таблицы. Вот такая таблица у нас получилась довольно-таки быстро. Давайте еще выставим по центру цены и сделаем их тоже жирными. Далее нажимаем кнопку «Generate», копируем таблицу в буфер обмена. Вот этот код у нас скопируется, который расположен ниже, нажимаем «Copy to clipboard» и переходим в программу Adobe Muse.
Как вставить таблицу на сайт. Вставка таблицы в Muse. Просмотр.
Здесь у нас есть уже вот такая таблица, я ее делал для примера, для того, чтобы показать вам. Давайте сделаем новую страницу. Здесь нажимаем правую кнопку мыши и «Вставить». Скопированный код вставляется у нас в виде HTML фрейма. Здесь нам необходимо его немного растянуть. Для того, чтобы он лучше смотрелся на сайте, и разместим его по центру.
Как вы видите, сейчас в этом прямоугольном фрейме сейчас наша таблица прилипла к левому краю. Давайте зайдем в режим «Просмотра» и мы увидим, что наша таблица расположена не по центру сайта.
Как вставить таблицу на сайт. Центрирование таблицы.
Для того, чтобы расположить по центру данного прямоугольного фрейма нам необходимо выполнить один из двух вариантов.
Вариант 1.
Мы заходим снова на сайт, где мы только что сгенерировали таблицу. Идем вниз. И здесь есть вот такая закладка «Extra options», нажимаем на нее и выбираем вот эту функцию «Center table horizontally», ставим здесь «птичку» и выбираем данную опцию. И теперь еще раз нажимаем «Generate», еще раз копируем таблицу в буфер обмена, нажав вот эту кнопку. Заходим в программу Adobe Muse и снова нажимаем здесь вставить. Давайте теперь снова растянем данную таблицу немного шире. И теперь вы видите, что таблица расположилась ровно по центру данного прямоугольного фрейма. В прошлый раз эта таблица была расположена у нас по левому краю.
Вариант 2.
Мы заходим в «Редактирование HTML кода» в самой программе Adobe Muse. И здесь нам нужно прописать один тег. Это тег центрирования. Просто пишем здесь <center>. Вот такой вот тег. Копируем его еще раз, идем в самый низ и после закрытия тега таблицы, вставляем </center>. Вот таким вот образом вы можете центрировать таблицу прямо в программе Adobe Muse, не переходя снова на сайт.
Теперь в режиме «Просмотр» у нас будет две таблицы, которые расположены ровно по центру страницы в браузере.
Как вставить таблицу на сайт. Сохранение и дальнейшее редактирование.
Для того, чтобы в дальнейшем нам снова редактировать таблицу и не нужно было постоянно делать снова такой дизайн каждый раз, мы можем прямо на сервисе здесь на сайте сохранить нашу. Нажимаем «File» и нажимаем «Save table». Выбираем здесь имя нашей таблицы, которое вы пожелаете и нажимаете «Download». Таблица сохраняется у нас в формате «.TGN». я сохранил ее на рабочий стол.
В дальнейшем, если нам нужно будет снова сгенерировать код данной таблицы или поправить ее, то мы нажимаем «File», далее «Load table» и выбираем файл, который сохранили. Я выбираю этот файл, нажимаю «Load». И таблица у нас снова загружается для редактирования. Здесь мы можем еще добавлять еще строки таблицы, колонки таблицы и редактировать текст. Затем снова нажимаете «Generate», генерируете новый код, копируете его в буфер обмена и вставляете на сайт в программе Adobe Muse.
Вот таким вот образом вы можете создавать и размещать таблицы на сайтах, которые вы делаете в программе Adobe Muse.
Все ссылки на сайты вы найдете под этим видео. Если вам понравился мой видеоурок, ставьте лайки и пишите комментарии внизу. Подписывайтесь на мой канал и до встречи в следующих видеоуроках!
Гибкая таблица для сайта – смотрите видеоурок.
Автор видеоурока
Дмитрий Шаповалов