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

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

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

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

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

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

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

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

<table>
	<tr>
	   <th></th>
	   <th></th>
	</tr>
	<tr>
	   <td></td>
	   <td></td>
	</tr>
</table>

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

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

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

<table>
	<tr>
	   <th>Услуга</th>
	   <th>Цена, р.</th>
	</tr>
	<tr>
	   <td>Стирка маек</td>
	   <td>100</td>
	</tr>
</table>

Здесь у нас:

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

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

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

<table>
	<tr>
	   <th>Услуга</th>
	   <th>Срок, ч.</th>
	   <th>Цена, р.</th>
	</tr>
	<tr>
	   <td>Стирка маек</td>
	   <td>0.5</td>
	   <td>100</td>
	</tr>
	<tr>
	   <td>Химчистка курток</td>
	   <td>24-48</td>
	   <td>1000</td>
	</tr>
</table>

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

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

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

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

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

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

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

<table>
	<tr>
	   <th>Услуга</th>
	   <th>iPhone 5S</th>
	   <th>iPhone 5C</th>
	   <th>iPhone 5</th>
	</tr>
	<tr>
	   <td>Диагностика</td>
	   <td colspan="3">бесплатно</td>
	</tr>
	<tr>
	   <td>Замена дисплейного модуля</td>
	   <td>5000</td>
	   <td>4500</td>
	   <td rowspan="2">3500</td>
	</tr>
		<tr>
	   <td>Замена корпуса</td>
	   <td>3500</td>
	   <td>3500</td>
	</tr>
</table>

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

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

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

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

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

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

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

<table class="ceny">
	<tr>
	   <th>Услуга</th>
	   <th>iPhone 5S</th>
	   <th>iPhone 5C</th>
	   <th>iPhone 5</th>
	</tr>
	<tr>
	   <td>Диагностика</td>
	   <td colspan="3">бесплатно</td>
	</tr>
	<tr>
	   <td>Замена дисплейного модуля</td>
	   <td>5000</td>
	   <td>4500</td>
	   <td rowspan="2">3500</td>
	</tr>
		<tr>
	   <td>Замена корпуса</td>
	   <td>3500</td>
	   <td>3500</td>
	</tr>
</table>

Обратите внимание, что в самом начале для 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 5S iPhone 5C iPhone 5
Диагностика бесплатно
Замена дисплейного модуля 5000 4500 3500
Замена корпуса 3500 3500

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

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

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

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

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

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

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

add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>	
    <script type="text/javascript" charset="utf-8">
        jQuery(document).ready(function(){
            if(typeof(QTags) !== 'undefined') {
				QTags.addButton( 'table', 'table', '<table>', '</table>');
				QTags.addButton( 'tr', 'tr', '<tr>', '</tr>');
				QTags.addButton( 'th', 'th', '<th>', '</th>');
				QTags.addButton( 'td', 'td', '<td>', '</td>');
            }
        });
    </script>
	<?php
}

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

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

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

Добавляем кнопки тегов таблицы

Клик для увеличения

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 7 комментариев
  1. Андрей (129 комм.):
    http://zarobitok.ru/

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

  2. Антон (22 комм.):
    http://jonyit.ru

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

  3. Артём Черкасов (83 комм.):
    http://zarabotka.guru/

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

  4. Ирина (5 комм.):
    http://batalova62.ru

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

  5. Константин (1 комм.):

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

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.47MB | MySQL:68 | 0,716sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html