- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Advertisements