• A
  • A
  • A
  • АБВ
  • АБВ
  • АБВ
  • А
  • А
  • А
  • А
  • А
Обычная версия сайта

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

Создание таблицы в визуальном редакторе

Копирование таблицы из Word и Excel

Использование изображений в таблицах

Установление ширины ячейки для таблицы с картинками

Ширина таблицы

Специальные шаблоны для создания таблиц

 

Создание таблицы в визуальном редакторе

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

В появившемся окне укажите необходимое количество строк и столбцов. При необходимости отметьте флажок «Заголовок ячейки». В этом случае у первой строчки таблицы ячейки будут объединены. В момент первоначального создания таблицы не рекомендуем задавать границы таблицы, поскольку в этом случае в визуальном редакторе границы таблицы отображаться не будут (хотя при сохранении страницы и при просмотре её в обычном режиме все границы отобразятся).

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

Если вы в самом начале работы с таблицей не поставили значение границы, а границы для данной таблицы необходимы, то задать их можно двумя способами:
1) ставим курсор в любом месте таблицы, кликаем правой кнопкой мышки, в появившемся контекстном меню выбираем «Параметры таблицы», в поле «Граница» проставляем значение толщины границ (1 – практически универсальный размер границ);
2) ставим курсор в любом месте таблицы и снова нажимаем на иконку создания таблицы. В появившемся окошке в поле «Граница» проставляем значение толщины границ (1 – практически универсальный размер границ).

Копирование таблицы из Word и Excel

В том случае, если Вы копируете таблицу из Word или Excel, необходимо пользоваться инструментами очистки лишнего кода и форматирования.

Сначала нужно воспользоваться кнопкой "очистка стилей таблицы":

Далее необходимо использовать "метелку" и "ластик" для очистки формата текста.

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

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

Использование изображений в таблицах

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

1. Нажимаем кнопку "Загрузка и вставка картинки"

2. Ждём загрузки изображения. Переходим на вкладку "Положение", поле "Размер". Первая цифра — размер в пикселях по ширине, вторая — размер в пикселях по высоте.

3. Если размер изображения по ширине и высоте устраивает, нажимаем вставить.

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

5. В открывшемся окне снова выбираем вкладку "Положение" и меняем размеры картинки. Нажимаем кнопку "Обновить".

 

Установление ширины ячейки для таблицы с картинками

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

1. Наводим курсор на самую верхнюю ячейку столбца таблицы с картинкой. Щёлкаем левой кнопкой мыши. Вокруг таблицы должна появиться рамка.

2. Щёлкаем в ячейке правой кнопкой мыши, вызывая контекстное меню. В появившемся меню выбираем пункт "Ячейка" — "Параметры ячейки".

3. В поле "Ширина" выставляем ширину в процентах (при сохранении страницы именно такой процент от всей страницы будет занимать столбец с изображениями). После этого нажимаем кнопку "Обновить".

 

4. Сохраняем страницу. Обязательно смотрим, как таблица выглядит на готовой странице (а не только в редакторском интерфейсе)!

 

Ширина таблицы

В том случае, если таблица занимает на странице очень много места, "разрывает" страницу, необходимо изменить ширину таблицы.

1. Щёлкаем по таблице левой кнопкой мыши.

2. Щёлкаем правой кнопкой мыши, вызывая меню.

3. Выбираем пункт "Параметры таблицы".

4. В поле "Ширина" удаляем текущее значение и задаём значение "100%" (в том случае, если хотим, чтобы таблица занимала всё пространство страницы, т.е. 100%). Нажимаем обновить. Сохраняем страницу.

5. Обязательно проверяем, как выглядит сохранённая страница.

 

Специальные шаблоны для создания таблиц

Таблицу можно также добавить через «специальные шаблоны». Нажмите на кнопку добавления специального элемента.

Строка данных включает в себя заголовок и 2 строки с данными, значения и их расшифровка. Можно разместить до 6 столбцов с возможностью их объединения.

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

 

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

 

 


 

Нашли опечатку?
Выделите её, нажмите Ctrl+Enter и отправьте нам уведомление. Спасибо за участие!