Заказать звонок

Отправляя форму, Вы принимаете политику конфиденциальности
Управление сайтом
Выпуск №46
19.11.2013

Выпуск №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 (сделав пометку в теме письма «Визуальное оформление»), и с Вами свяжутся наши сотрудники для согласования условий.

Хотите получать информацию от лидера рынка?

Подпишитесь на рассылку!

Оставляя заявку, вы принимаете политику конфиденциальности