Блог. Университет Интернет-маркетинга
Новости. Знания. Технологии.
Назад
19.11.2013
904

Выпуск №46. Выравнивание картинок и текстов посредством таблиц

Красивые таблицы на сайте - убедительный аргумент в борьбе за потенциального покупателя

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

Давайте посвятим наш сегодняшний разговор тому, как самостоятельно создавать и оформлять таблицы на сайте в системе CMS S3 Megagroup. Во-первых, это бесплатно. Во-вторых, способно повлиять на прибыль компании (в лучшую сторону, разумеется).
Начинаем с азов…
 

1. Создание таблицы

Значок таблицы в редактореТаблица в текстовом редакторе создается с помощью кнопки «Добавление/Изменение таблицы», находящейся в верхней строке панели инструментов. При нажатии на эту кнопку открывается окно, где можно задать общие свойства таблицы, такие как количество строк и столбцов, наличие или отсутствие рамки, ширину и высоту таблицы.
Обычно высота не задаётся, так как она  автоматически меняется в зависимости от наполнения. Ширину же таблицы можно задать либо в пикселях, либо в процентах от размеров контентной области сайта. Для того чтобы таблица распределялась по всей ширине страницы, значением поля можно указать 100% (именно со знаком процентов после указания числа).
Давайте для пробы создадим таблицу с границами, автоматически заполняющую всю ширину страницы и состоящую из пары строк и пары столбцов.

Общие настройки таблицы
 

2. Добавление дополнительных строк и столбцов

Если в процессе редактирования таблицы Вы решили, что не хватает столбцов, их можно легко добавить с помощью кнопок «Добавить столбец слева» Вставить столбец слева или «Добавить столбец справа» Вставить столбец справа. Они также находятся в верхнем ряду панели редактора и становятся активными только когда таблица выделена курсором.
Для добавления дополнительных колонок нужно установить курсор на любой ячейке столбца, рядом с которым следует добавить дополнительный, и нажать на одну из этих кнопок. Если какой-то столбец оказался лишним, его можно удалить, предварительно выделив, и нажав на кнопку «Удалить столбец» Убрать столбец.
Аналогичным образом осуществляются действия со строками. Для работы можно использовать кнопки «Добавить строку сверху» Вставить строку сверху, «Добавить строку снизу» Вставить строку снизу и «Удалить строку» Убрать строку.
 

3. Объединение ячеек

Довольно часто требуется в первой строке таблицы прописать её заголовок. Чтобы сформировать общее «поле», можно использовать функцию объединения ячеек. Выделяем все ячейки первой строки и кликаем на кнопку «Слить ячейки» Объединить ячейки. Объединять ячейки можно не только в рамках строк, но и внутри столбцов.
 

4. Выделение фона таблицы и фона строки

Для придания таблице большей выразительности можно задать цвет заливки. Кликаем по любому месту таблицы и нажимаем на уже знакомую кнопку «Добавление/Изменение таблицы». Здесь на вкладке «Дополнительно» устанавливаем цвет фона. Его можно прописать вручную (если заранее известен код требуемого цвета), либо подобрать из палитры оттенков, которую можно открыть, нажав на кнопку «Обзор» рядом с областью для указания цвета.

Настройка цветового оформления

После того, как цвет подобран, жмём на «Обновить» внизу окна.
Выделять цветом можно не только всю таблицу целиком, но и отдельные строки, ячейки. Для этого после установки курсора в нужную ячейку, нажмите на «Параметры строки» Свойства строки или «Параметры ячейки» Свойства ячейки. В данном случае цветом всей таблицы зададим светло-голубой, а фоном строки с заголовком - более насыщенный голубой.

Первый результат настроек
 

5. Назначение ширины ячейкам

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

Установка ширины ячеек
 

6. Вертикальное выравнивание внутри ячеек

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

Таблица с текстом и картинкой

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

Установка вертикального выравнивания
 

7. Убираем лишние отступы

Ну и последний штрих - удаление ненужных отступов. Они могут не отображаться в системе управления,

Отступы в системе управления

но быть заметными на сайте.

Как выглядят отступы на сайте

С 99% вероятности можно сказать, что Вы используете абзацы внутри ячеек. Именно они и дают дополнительные отступы. Для того чтобы убрать отступы, достаточно заменить абзацы на div-ы. Устанавливаем курсор в любое место текста в ячейке и в выпадающем списке «формат» вместо абзацев выбираем DIV.

Убираем ненужные отступы

После этого обязательно сохраняем изменения.

Совет дня. Не хватает времени? Закажите разработку оформления страниц и таблиц силами специалистов Мегагрупп.ру

Услуга платного оформленияДействительно ли таблицы играют важную роль при передаче информации потенциальному покупателю?
Предлагаем Вам самостоятельно ответить на этот вопрос, посмотрев несколько примеров сайтов с визуальным оформлением. Эти страницы были созданы специалистами Мегагрупп.ру.

- Виллы: http://ionion-home.ru/villy4
- Услуги салона красоты: http://tencolors.ru/prays-list.php
- Строительные материалы: http://tdblago.ru/o_materiale
- Продукты питания оптом: http://flikom.ru/
- Ремонтно-строительные работы: http://ckm-remont.ru/

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

Как заказать такую услугу?
Просто отправьте заявку на адрес support@megagroup.ru (сделав пометку в теме письма «Визуальное оформление»), и с Вами свяжутся наши сотрудники для согласования условий.

Рекомендуем прочитать
Семантическое ядро сайта

Привет! Клиенты часто спрашивают, как увеличить трафик на сайт без больших и постоянных вложений. Один из самых эффективных способов - сбор семантики сайта для дальнейшей SEO-оптимизации. Как это работает? Давайте разбираться вместе!

Читать дальше ..
Яндекс вновь подтвердил квалификацию контекстологов Megagroup
Самый котируемый сертификат для специалиста по контекстной рекламе выдает Яндекс. Получить его - задача не из легких. Но наши специалисты в очередной раз справились с этим испытанием.  Попробуем разобраться вместе, как это работает?
Читать дальше ..
Обновления Интернет-магазина 2.0. Брошенные корзины или как отслеживать незавершенные заказы
Брошенные корзины — новый инструмент для повышения конверсии и удержания покупателей.
Читать дальше ..
Обновления Интернет-магазина 2.0. Наценки и условия для служб доставки Deligate, редизайн Delica и доработки интеграции со СДЭК
Для любой из доставок можно задать условия вывода на сайте и настроить применение наценок при соблюдении определенных условий.
Читать дальше ..
Обновления CMS.S3. Редизайн форм и доработки опросов
Небольшое обновление дизайна «Конструктора форм» и «Расширенного конструктора форм», а также новые возможности опросов.
Читать дальше ..
Зачем на сайте FAQ и как его нужно заполнить
Когда пользователь заинтересован продуктом или услугой, он пойдет искать уточняющую информацию в раздел, который должен быть на каждом сайте.
Читать дальше ..
S3 от Мегагрупп вошла в топ-5 самых популярных CMS
Мы заняли 4 место в рейтинге iTrack.ru!
Читать дальше ..
Обновления Интернет-магазина 2.0. Как подключить Яндекс.Доставку к своему сайту
Яндекс.Доставка теперь в Deligate.
Читать дальше ..
Megagroup.ru попала в топ-5 веб-студий по России в 2020 году
Веб-студия вошла в рейтинг лидеров рынка разработки сайтов в России по оценке независимого рейтингового агентства ГидМаркет.
Читать дальше ..
Наш канал на Яндекс.Дзен

У Megagroup.ru появился канал на Яндекс.Дзен. Мы говорим о сложных вещах легким и простым языком.

Читать дальше ..
Хотите получать информацию от лидера рынка?
Подпишитесь на рассылку!