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

29 августа 2018

Советы

Рассмотри как правильно вставить таблицу из экселевского файла (Microsoft Excel) на страницу сайта в текстовом редакторе системы управления сайтом TSAdmin.

 

Открываем сам Excel файл с таблицей. Видим примерно такое:

 

 

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

 

Итак, выделяем необходимую область экселевского документа (таблицы):

 

 

На скриншоте выделенная область отмечена зеленой рамкой.

 

Будьте внимательны! Не выделяйте лишних пустых строк или столбцов, если не хотите чтобы они отображались на сайте!

 

Кликаем правой клавишей мыши, и в выпадающем списке выбираем "Копировать".

 

 

Переходим в систему управления сайтом ТСАдмин.

 

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

 

В текстовом редакторе кликаем на иконку "Вставить из Word":

 

 

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

 

 

Вставляем в него скопированную таблицу из Excel. Выглядеть это будет примерно так:

 

 

Все хорошо. Жмем "Ок".

 

В текстом редакторе видим следующий результат:

 

 

Сохраняем кликнув "Сохранить" в правом верхнем углу.

 

 

В экселе не было обводки ячеек и таблица на сайте так же не содержит выделения.

 

Очистим таблицу от форматирования использовавшегося в Excel. 

 

Выделяем таблицу в текстовом редакторе.

 

 

Кликаем в текстовом редакторе по иконке "Убрать форматирование" (значок ластика):

 

 

Таблица "чиста". Сохраняем.

 

Перейдем к оформлению таблицы. Рассмотрим 2 варианта, попроще и посложнее, чтобы у вас был выбор. Оба варианта дадут один и тот же результат.

 

Вариант 1

 

В районе таблицы, в текстовом редакторе кликаем правой клавишей мыши и выбираем "Свойства таблицы".

 

 

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

 

 

Чтобы добавить отступ внутри ячеек от текста до границы, указываем внутренний отступ "10" (10 пикселей), или другой на ваше усмотрение:

 

 

Если нужно чтобы таблица растягивалась по ширине экрана от края до края, в поле "Ширина" указываем "100%" или просто оставляем это поле нетронутым:

 

 

Жмем "Ок" и затем "Сохранить".

 

В редакторе таблица должна иметь следующий вид:

 

 

Текстовой редактор переключаем на "Источник":

 

 

Для добавления границы таблицы, находим в коде текст border="0", он располагается в самом начале :

 

 

Заменяем цифру "0" на единицу "1":

 

 

Сохраняем кликнув "Сохранить" в правом верхнем углу.

 

 

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

 

 

Далее добавим отступы между текстом и рамкой ячеек.

 

Переключаем редактор на "Источник":

 

 

Находим кусок кода отвечающий за этот параметр cellpadding="0":

 

 

Ноль значит что отступ равен нулю. Сделаем отступ 10 пикселей (или другое значение на ваше усмотрение). Меняем "0" на "10":

 

 

Сохраняем кликнув на кнопку "Сохранить".

 

 

Проверяем полученный результат. Таблица получила отступы:

 

 

Поздравляем, таблица из Excel успешно размещена на странице вашего сайта!