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

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

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

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

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

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

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

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

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

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

	

	   
Услуга
	   
Цена, р.
	
	

	   
Стирка маек
	   
100
	

Здесь у нас:

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

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

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

	

	   
Услуга
	   
Срок, ч.
	   
Цена, р.
	
	

	   
Стирка маек
	   
0.5
	   
100
	
	

	   
Химчистка курток
	   
24-48
	   
1000
	

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

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

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

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

Здесь в строке "Диагностика" я объединил 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; /* текст по центру */
}

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

Стильно и не броско. Каждая нечетная строка будет окрашивать автоматически слегка в другой цвет, чтобы визуально разделить однообразие строк в большой таблице. Вы сами можете подобрать цвета по своему усмотрению, например программой 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', '', '');
Теперь у вас появятся новые кнопки:
Клик для увеличения