Teach with us

How to Create a Pricing Table using HTML and CSS?

We can create a basic pricing table using just HTML and CSS. A pricing table can be a useful feature to implement in different websites where the purchase of commodities is involved, for example, an e-commerce web application, or travel websites. Let’s learn to create a such table with the help of the example below −

Example

We will first create an HTML layout of the table in the following index.html file, and then add stylings to it.

<html lang="en">
<head>
   <title>How to Create Pricing Table using HTML and CSS?</title>
   <style>
      .cards {
         display: flex;
         gap: 10px;
      }
      .cards ul {
         list-style-type: none;
         border: 1px solid;
         margin: 0;
         padding: 0;
      }
      .cards ul li {
         border-bottom: 1px solid;
         text-align: center;
         padding: 10px;
      }
      .cards ul .header {
         background-color: black;
         color: white;
         font-size: 1rem;
      }
      .cards ul .button {
         background-color: green;
         cursor: pointer;
         color: white;
         padding: 5px 10px;
      }
   </style>  
</head>
<body>
   <h3>How to Create Pricing Table using HTML and CSS?</h3>
   <div class="cards">
      <ul class="gold">
         <li class="header">Gold</li>
         <li>$9.99</li>
         <li>10 API calls per day</li>
         <li class="button">Sign up</li>
      </ul>
      <ul class="silver">
         <li class="header">Silver</li>
         <li>$19.99</li>
         <li>100 API calls per day</li>
         <li class="button">Sign up</li>
      </ul>
      <ul class="platinum">
         <li class="header">Platinum</li>
         <li>$29.99</li>
         <li>500 API calls per day</li>
         <li class="button">Sign up</li>
      </ul>
   </div>
</body>
</html>

Conclusion

In this article, we learned how to create a basic pricing table using just HTML and CSS. We first created our basic structural layout using our index.html file, and then we added the stylings to it.

Updated on 22-Feb-2023 11:36:28

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements