Таблица цен для сайта (тарифы в HTML и CSS)
Напишите тарифы в поле: строка с названием и ценами, а ниже пункты. Выделение отмечайте символом * в названии.
Как пользоватьсяТарифы бок о бок, лучший — в центре внимания
Доступно на: 
Таблица цен для сайта (тарифы в HTML и CSS): для чего нужен
Хорошо оформленный раздел с тарифами помогает посетителю сравнить и выбрать. Напишите каждый тариф с названием, ценой в месяц, ценой в год, кнопкой и включёнными (+) и не включёнными (-) пунктами, а выделение отметьте звёздочкой.
Код получается адаптивным: выделенный тариф слегка приподнят и со значком, значки «включено» и «не включено» (с текстом для программ чтения с экрана) и переключатель «месяц/год» только на CSS и радиокнопках. Настройте цвет, валюту и текст значка.
Как пользоваться
- Напишите тарифы и пункты.
- Отметьте выделенный тариф и настройте цвета.
- Скопируйте код.
Когда использовать
- Подписочные тарифы.
- Пакеты услуг.
- Тарифы фитнес-клуба или курса.
Частые вопросы
Как писать тарифы?
Каждый тариф начинается со строки «Название | цена в месяц | цена в год | текст кнопки | ссылка». Следующие строки, начинающиеся с + или -, — это включённые и не включённые пункты. Оставьте пустую строку между тарифами. Поставьте * перед названием тарифа, который нужно выделить.
Как работает переключатель «месяц/год»?
Если указать годовую цену, появится переключатель для посетителя. Он работает на CSS и радиокнопках, без JavaScript, а обе цены остаются в HTML.
Сколько тарифов показывать?
Чаще всего три: средний, выделенный, выбирают чаще всего. Если их больше четырёх, сравнивать трудно; в таком случае лучше подойдёт сравнительная таблица.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.