В этой серии статей мы покажем вам, как создавать динамические таблицы цен при разработке внешнего интерфейса веб-сайта с помощью HTML, CSS и JavaScript. Мы собираемся показать вам несколько различных способов представления таблиц цен в зависимости от ваших тарифных планов, макета веб-сайта, устройства целевой аудитории и т. д.

Таблица цен 1, ссылка

Таблица цен 2, ссылка

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

Среда

:root{
  --main-color: #4a4e69;
}

HTML — Структура

Таблица цен построена на основе класса «pricing_container», который содержит класс «subscription_options» и «setting». Класс «subscription_options» содержит три столбца (класс «подписка col1», «подписка col2» и «подписка col3»). Каждый класс «подписки» включает в себя пять рядов и один ‹h2› по общей цене.

<div class = "pricing_container">
   <div class="subscription_options">
          <div class="subscription col1">
            <div class="row1">
            </div>
            <div  class="row2">
            </div>
            <div  class="row3">
            </div>
            <div  class="row4">
            </div>
            <div  class="row5">
            </div>
            <h2>...</h2>
          </div>
          <div class="subscription col2">
            <div class="row1">
            </div>
            <div  class="row2">
            </div>
            <div  class="row3">
            </div>
            <div  class="row4">
            </div>
            <div  class="row5">
            </div>
            <h2>...</h2>
          </div>
          <div class="subscription col3">
            <div class="row1">
            </div>
            <div  class="row2">
            </div>
            <div  class="row3">
            </div>
            <div  class="row4">
            </div>
            <div  class="row5">
            </div>
            <h2>...</h2>
          </div>          
	</div>
  <div class="setting"> …