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.
Updated on: 22-Feb-2023
608 Views
Advertisements