Як вставити таблицю на сайт (з Excel в Adobe Muse)
Як вставити таблицю на сайт. складену в програмі Microsoft Excel на сайт, створений в програмі Adobe Muse за допомогою онлайн сервісу по генерації таблиць.
Існує багато способів перетворення і генерації HTML коду таблиць. Наприклад, можна просто взяти код таблиці прямо з файлу Excel, попередньо зберігши файл як веб-сторінку. Але такий код виходить досить громіздким і «брудним».
Даний спосіб і сервіс, який я пропоную використовувати для створення таблиці, дозволить Вам взяти таблицю з Excel і отримати чистий і красивий код таблиці для Вашого сайту.
Як вставити таблицю на сайт. Підготовка.
Ми просто копіюємо таблицю, яку ви створили в програмі Excel. Тут ви можете не налаштовувати ні шрифти, ні розмір шрифтом, це ми всі будемо робити на сайті. Просто виділяєте таблицю, натискаєте «Копіювати» і переходите на сайт. Тут заходите в меню «File» і вибираєте опцію «Paste table data». Якраз сюди ви і зможете вставити таблицю з програми Microsoft Excel. Натискаємо тут «Вставити». Вставляється ось такий текст. І натискаємо кнопку «Load».
Все, наша таблиця завантажена на даний сервіс. І тут ми можемо з нею зробити деякі настройки.
Як вставити таблицю на сайт. Дизайн таблиці і генерація коду.
Давайте зайдемо в розділ «Theme» і виберемо їй якусь відповідну тему, наприклад, я виберу ось цю синию із запропонованих. І поставлю тут кордону таблиці, наприклад, ось такі поділу колонок і рядків. А також виберу тут підсвічування, наприклад, ось цю - рядки таблиці через одну будуть підсвічуватися іншим кольором. Натискайте вгору, натискаю «Закрити», і таблиця у нас досить вже добре виглядає.
Тут у нас є вже ось така таблиця, я її робив для прикладу, для того, щоб показати вам. Давайте зробимо нову сторінку. Тут натискаємо праву кнопку миші і «Вставити». Скопійований код вставляється у нас у вигляді HTML фрейма. Тут нам необхідно його трохи розтягнути. Для того, щоб він краще виглядав на сайті, і розмістимо його по центру.
Як вставити таблицю на сайт. Центрування таблиці.
Для того, щоб розташувати по центру даного прямокутного фрейму нам необхідно виконати один з двох варіантів.
Варіант 1.
Ми заходимо знову на сайт, де ми тільки що згенерували таблицю. Йдемо вниз. І тут є ось така закладка «Extra options», натискаємо на неї і вибираємо ось цю функцію «Center table horizontally», ставимо тут «пташку» і вибираємо цю опцію. І тепер ще раз натискаємо «Generate», ще раз копіюємо таблицю в буфер обміну, натиснувши ось цю кнопку. Заходимо в програму Adobe Muse і знову натискаємо тут вставити. Давайте тепер знову растянем дану таблицю трохи ширше. І тепер ви бачите, що таблиця розташувалася рівно по центру даного прямокутного фрейму. Минулого разу ця таблиця була розташована у нас по лівому краю.
Варіант 2.
Ми заходимо в «Редагування HTML коду» в самій програмі Adobe Muse. І тут нам потрібно прописати один тег. Це тег центрування. Просто пишемо тут
Як вставити таблицю на сайт. Збереження і подальше редагування.
Для того, щоб в подальшому нам знову редагувати таблицю і не потрібно було постійно робити знову такий дизайн кожен раз, ми можемо прямо на сервісі тут на сайті зберегти нашу. Натискаємо «File» і натискаємо «Save table». Вибираємо тут ім'я нашої таблиці, яке ви побажаєте і натискаєте «Download». Таблиця зберігається у нас в форматі «.TGN». я зберіг її на робочий стіл.
Надалі, якщо нам потрібно буде знову згенерувати код даної таблиці або поправити її, то ми натискаємо «File», далі «Load table» і вибираємо файл, який зберегли. Я вибираю цей файл, натискаю «Load». І таблиця у нас знову завантажується для редагування. Тут ми можемо ще додавати ще рядки таблиці, колонки таблиці і редагувати текст. Потім знову натискаєте «Generate», генеруєте новий код, копіюєте його в буфер обміну і вставляєте на сайт в програмі Adobe Muse.
Ось таким ось чином ви можете створювати і розміщувати таблиці на сайтах, які ви робите в програмі Adobe Muse.