mojwp.ru
Назад

Как сделать таблицу цен самостоятельно и оформить

Опубликовано: 07.07.2014
7
3470

Для сайтов коммерческой тематики очень важно наличие таблицы цен на товар/услуги.

В данной статье я покажу как без помощи плагинов и прочих сторонних продуктов создать таблицу цен и оформить ее красиво. Использовать будем связку HTML/CSS.

Те из вас, кто хочет более углубленно вникнуть в разметку таблиц, читайте об этом на http://htmlbook.ru/html/table. Далее в статье будут представлены готовые куски кода, которые вы просто вставляете себе на сайт и модифицируете по желанию (дополняете, правите и т.п.).

Структура статьи такова: от простого к сложному. Наглядный пример таблицы цен вы можете глянуть на странице https://mojwp.ru/uslugi. Оформлять можно как угодно.

Если же вы не любитель самостоятельно копаться в коде своего сайта, а хотите лишь пожинать "плоды", то закажите продвижение сайтов в Астане и ребята из компании "Нобель" настроят вам сайт должным образом.

Самый простой пример таблицы цен для сайта

На сайте WordPress вставлять код таблицы следует в режиме "Текст" записи.

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

УслугаЦена, р.
Стирка маек100

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

Услуга Цена, р.
Стирка маек 100

Здесь у нас:

  • <table></table> - открывающий и закрывающий тег таблицы.
  • <tr></tr> - открывающий и закрывающий тег строки в таблице. Внутри строк могут располагаться ячейки
  • <th></th> - заголовочная ячейка. Обычно она идет сразу в таблице. Может быть, а может не быть. Решать вам. У меня она дает обозначение вертикальных колонок в таблице цен на услуги.
  • <td></td> - ячейки. Именно в них мы прописываем отдельные элементы информации вашей таблицы.

Обратите внимание на структуру: в каждой строке на примере по 2 ячейки. Это сделано для того, чтобы они по итогу стояли друг под другом: услуга под услугой, цена под ценой.

Давайте чутка усложним таблицу:

Услуга Срок, ч. Цена, р.
Стирка маек 0.5 100
Химчистка курток 24-48 1000

Визуально она будет выглядеть так для посетителя сайта:

УслугаСрок, ч.Цена, р.
Стирка маек0.5100
Химчистка курток24-481000

Здесь я добавил еще по 1 ячейке в строку, а так же новую строку со второй услугой. Аналогично и вы можете добавлять необходимое количество строк и ячеек.

Объединяем одинаковые соседние ячейки в таблице

Бывают случаи, когда рядом стоящие ячейки могут иметь один и тот же набор информации (стоимость товара/услуги). Тогда можно их объединить. Смотрите пример:

УслугаiPhone 5SiPhone 5CiPhone 5
Диагностикабесплатно
Замена дисплейного модуля500045003500
Замена корпуса35003500

Здесь в строке "Диагностика" я объединил 3 ячейки по горизонтали. А вот уже в двух строках с услугами по замене для iPhone 5 я объединил стоимость 3500р. по вертикали. Смотрите код и ниже пояснение:

Услуга iPhone 5S iPhone 5C iPhone 5
Диагностика бесплатно
Замена дисплейного модуля 5000 4500 3500
Замена корпуса 3500 3500

Обращаем внимание, что для горизонтального объединения ячеек я использовал дополнительный параметр colspan="3". В данном случае цифра 3 обозначает количество объединяемых ячеек. Если бы я поставил здесь цифру 2, тогда мне пришлось бы дописать дополнительно строку с ячейками <td></td>.

Для горизонтального объединения я использовал параметр rowspan="2". Здесь цифра 2 означает так же количество ячеек. Посмотрите внимательно как выглядит структура с данными параметрами.

Тут главное представлять конечный результат, чтобы правильно расставить colspan и rowspan. Хотя можете не заморачиваться с ними, а сделать все попроще, но наверняка.

Оформляем таблицу цен визуально

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

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

Добавляем в тег таблицы класс, чтобы потом использовать его в файле стилей шаблона сайта. К примеру, вот так для последней таблицы с iPhone:

Услуга iPhone 5S iPhone 5C iPhone 5
Диагностика бесплатно
Замена дисплейного модуля 5000 4500 3500
Замена корпуса 3500 3500

Обратите внимание, что в самом начале для table я задал class="ceny". Вот аккурат ceny у нас и будет классом для данной таблицы. Вы можете называть как угодно: главное на латинице и без пробелов.

Теперь открываем файл стилей шаблона (обычно style.css, css.css или подобное) и добавляем в самый конец его следующее:

/* общие параметры для всей таблицы */
table.ceny {
    border: 1px solid #ECEDEE; /* общая рамка вокруг таблицы */
    margin: 10px 0; /* отступ сверху и снизу от таблицы 10px, слева и справа 0 */
    width: 100%; /* ширина таблицы */
}
/* параметры для ячейек заголовков */
table.ceny th {
    background: #124D9C; /* цвет ячейки заголовка */
    border-right: 1px solid #ECEDEE; /* рамка справа от ячейки заголовка */
    color: #FFFFFF; /* цвет шрифта заголовка */
    font-size: 15px; /* размер шрифта заголовка */
    padding: 5px; /* внутренний отступ в заголовке */
    text-align: center; /* расположение текста по центру ячейки заголовка (центрирование) */
}
/* параметры для нечетных строк таблицы 1,3,5,7 и т.д. */
table.ceny tr:nth-child(odd) {
    background: #F2F7FD; /* цвет фона строки */
}
/* параметры только для первой ячейки в каждой из строк */
table.ceny td:nth-child(1) {
    text-align: left;
}
/* параметры для всех ячеек таблицы */
table.ceny td {
    border-bottom: 1px solid #ECEDEE; /* рамка снизу ячейки */
    border-right: 1px solid #ECEDEE; /* рамка справа ячейки */
    font-size: 14px; /* размер шрифта */
    padding: 4px; /* внутренний отступ в ячейки от края */
    vertical-align: middle; /* горизонтальное выравнивание */
    text-align: center; /* текст по центру */
}

Теперь таблица выглядит вот так:

УслугаiPhone 5SiPhone 5CiPhone 5
Диагностикабесплатно
Замена дисплейного модуля500045003500
Замена корпуса35003500

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

Аналогичных таблиц вы можете наделать сколько угодно. Просто давайте ей соответствующий класс и при необходимости прописывайте стили CSS.

Вопросы задавайте в комментариях к статье. Постараюсь на все ответить оперативно.

Бонус для сайтов на WordPress

Спасибо Андрею, постоянному читателю моего блога. В комментариях он посоветовал добавить кнопки в панель форматирования текста в режиме "Текст", как это я делал в статье Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML.

Не забывайте делать резервные копии файлов, с которыми работаете. Я не несу ответственности за ваши действия.

Открываем файл функций шаблона functions.php и в самом начале с новой строки после знака <?php вставляете следующее:

add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>  

Если ранее таким образом добавляли себе кнопки, то достаточно вставить лишь необходимые строки:

QTags.addButton( 'table', 'table', '', '
'); QTags.addButton( 'tr', 'tr', '', ''); QTags.addButton( 'th', 'th', '', ''); QTags.addButton( 'td', 'td', '', '');

Теперь у вас появятся новые кнопки:

Добавляем кнопки тегов таблицы
Клик для увеличения
Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Андрей
    Опубликовано: 07.07.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 07.07.2014 Ответить на сообщение

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

  • Антон
    Опубликовано: 07.07.2014 Ответить на сообщение

    О спасибо Виталь! Статью в закладки и ещё скажи как ты сделал, чтобы галочка на получение комментариев по email была активной по умолчанию?

    • Виталий
      Опубликовано: 07.07.2014 Ответить на сообщение

      В плагине настройка такая. Плагин Subscribe to Comments

  • Артём Черкасов
    Опубликовано: 09.07.2014 Ответить на сообщение

    Гуд статья! Пригодиться обязательно, как раз в ближайшее время планирую табличку делать =)

  • Ирина
    Опубликовано: 12.07.2014 Ответить на сообщение

    Спасибо, большое. Таблицу делать могла, а вот прикрепить к ней стили не получалось, теперь проблема решена. Да ещё отдельное спасибо за кнопочки на редактор. Попробую установить такие у себя.

  • Константин
    Опубликовано: 01.04.2016 Ответить на сообщение

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

    Но вообще, как рассказывается в статье: http://infodio.ru/tablica-dlya-sajta.html, сейчас уже есть достаточно бесплатных онлайн генераторов таблиц, что делает удобным процесс создания и вставки на сайт даже сложных таблиц.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.