How to Create a Pricing Table with HTML & CSS
A pricing table is a simple, yet helpful way for users to compare the pros and cons of different services and offerings.
In this article, you will find the HTML and CSS code for creating a very basic pricing table.
What Should Be Included in a Pricing Table?
A basic pricing table includes the name of the product/plan/service being offered, the price and the billing recurrence (i.e. billed annually or monthly), a link containing a call-to-action so that the user can purchase the product, and a list of included and excluded features.
Some extra elements that are often found in a pricing table include a description of the product, crossing out excluded items, and an alternative pricing toggle.
Final HTML and CSS Code Snippet
The below code snippets contain the very basic elements of a pricing table, but if you’re looking for a way to add extra elements, including plan description, crossing out excluded list items, alternative pricing toggle, and changing the position of the call-to-action button, you can try out the Free Pricing Table Generator.
Resulting Table
HTML
<div class="pricing_CardsFlex"> <div id="pricing_table_0" class="pricing_CardContainer "> <div class="pricing_BelowTitle"> <div class="pricing_TitlePriceContainer"> <h3 class="pricing_PlanTitle">Product Name</h3> <div class="pricing_Price"> <span class="pricing_PriceText">$1,000</span> <span class="pricing_Reccurence">annually</span> </div> <p class="pricing_Description"></p> <a class="pricing_Button" href="/link-from-your-site">Link</a> </div> <hr class="pricing_Separator"> <h4 class="pricing_ListTitle">Includes:</h4> <ul class="pricing_IncludedFeatures"> <li class="include ">Item 1</li> <li class="include ">Item 2</li> <li class="exclude ">Item 3</li> <li class="exclude ">Item 4</li> </ul> </div> </div> <div id="pricing_table_1" class="pricing_CardContainer"> <div class="pricing_BelowTitle"> <div class="pricing_TitlePriceContainer"> <h3 class="pricing_PlanTitle">Product Name</h3> <div class="pricing_Price"> <span class="pricing_PriceText">$1,000</span> <span class="pricing_Reccurence">annually</span> </div> <p class="pricing_Description"></p> <a class="pricing_Button" href="/link-from-your-site">Link</a> </div> <hr class="pricing_Separator"> <h4 class="pricing_ListTitle">Includes:</h4> <ul class="pricing_IncludedFeatures"> <li class="include ">Item 1</li> <li class="include ">Item 2</li> <li class="include ">Item 3</li> <li class="exclude ">Item 4</li> </ul> </div> </div> <div id="pricing_table_2" class="pricing_CardContainer "> <div class="pricing_BelowTitle"> <div class="pricing_TitlePriceContainer"> <h3 class="pricing_PlanTitle">Product Name</h3> <div class="pricing_Price"> <span class="pricing_PriceText">$1,000</span> <span class="pricing_Reccurence">annually</span> </div> <p class="pricing_Description"></p> <a class="pricing_Button" href="/link-from-your-site">Link</a> </div> <hr class="pricing_Separator"> <h4 class="pricing_ListTitle">Includes:</h4> <ul class="pricing_IncludedFeatures"> <li class="include ">Item 1</li> <li class="include ">Item 2</li> <li class="include ">Item 3</li> <li class="include ">Item 4</li> </ul> </div> </div> </div>
CSS
.pricing_CardsFlex .pricing_CardContainer * { font-family: system-ui; } .pricing_CardsFlex { display: flex; flex-wrap: wrap; grid-gap: 20px; justify-content: center; align-items: flex-start; } .pricing_CardsFlex .pricing_Separator { width: 95%; border: none; border-top: 1px solid #808080; } .pricing_CardsFlex .pricing_Banner { font-size: 1rem; background: #1d750c; color: #ffffff; padding: 3px; text-align: center; display: none; margin: 0; } .pricing_CardsFlex .pricing_CardContainer { max-width: 300px; min-width: 300px; border: 1px solid #616161; border-radius: 10px; background: #ffffff; padding-bottom: 20px; font-weight: 400; position: relative; } .pricing_CardsFlex .alignCenter .pricing_CardContainer { text-align: center; } @media(max-width: 450px) { .pricing_CardsFlex .pricing_CardContainer { max-width: 300px !important; min-width: 300px !important; } } .pricing_CardsFlex .pricing_PlanTitle { font-weight: 700; font-size: 1.5rem; color: #000000; margin-top: 10px; margin-bottom: 0; } .pricing_CardsFlex .pricing_BelowTitle { padding: 45px 20px 20px 20px; } .pricing_CardsFlex .pricing_IncludedFeatures { margin-bottom: 30px; list-style: none; margin-left: 40px; padding-left: 0; } .pricing_CardsFlex .pricing_IncludedFeatures li { font-size: 1.2rem; color: #000000; margin: 5px auto; position: relative; text-align: left; } .pricing_CardsFlex .pricing_IncludedFeatures li.lineThrough { text-decoration: line-through; } .pricing_CardsFlex .pricing_IncludedFeatures li.include:before { content: ""; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); width: 20px; height: 18px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='17' zoomAndPan='magnify' viewBox='0 0 810 809.999993' height='17' preserveAspectRatio='xMidYMid meet' version='1.0'%3E%3Cpath fill='%234ac263' d='M 774.292969 110.554688 L 769.28125 106.796875 C 752.992188 93.648438 732.945312 88.011719 714.152344 89.890625 C 694.105469 91.769531 675.941406 100.535156 662.785156 116.191406 L 493.644531 315.328125 L 393.410156 436.1875 L 320.117188 524.484375 L 270 471.257812 L 241.808594 441.824219 L 142.832031 338.5 C 128.421875 323.46875 109.628906 315.953125 89.582031 314.703125 C 70.789062 313.449219 50.742188 321.589844 36.335938 335.367188 L 31.324219 340.375 C 0.625 368.554688 0 417.402344 28.191406 447.460938 L 125.917969 550.160156 L 154.105469 580.84375 L 266.867188 699.199219 C 280.023438 712.351562 297.5625 721.117188 314.476562 721.742188 C 315.730469 721.742188 315.730469 721.742188 316.355469 721.742188 C 317.609375 721.742188 318.238281 721.742188 320.117188 721.742188 C 320.117188 721.742188 320.117188 721.742188 321.367188 721.742188 C 324.5 721.742188 327.007812 721.742188 330.765625 721.742188 C 350.8125 719.867188 368.980469 711.097656 382.132812 695.441406 L 550.023438 496.304688 L 615.800781 416.777344 L 783.6875 217.636719 C 810 185.699219 806.242188 138.109375 774.292969 110.554688 Z M 774.292969 110.554688 ' fill-opacity='1' fill-rule='nonzero'/%3E%3C/svg%3E"); } .pricing_CardsFlex .pricing_IncludedFeatures li.exclude:before { content: ""; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); width: 20px; height: 18px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='17' zoomAndPan='magnify' viewBox='0 0 810 809.999993' height='17' preserveAspectRatio='xMidYMid meet' version='1.0'%3E%3Cdefs%3E%3CclipPath id='725d5cd9f7'%3E%3Cpath d='M 72 76 L 737 76 L 737 739.984375 L 72 739.984375 Z M 72 76 ' clip-rule='nonzero'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23725d5cd9f7)'%3E%3Cpath fill='%23808080' d='M 498.6875 408.511719 L 717.089844 190.058594 C 742.992188 164.175781 742.992188 122.179688 717.089844 96.273438 C 691.191406 70.390625 649.246094 70.390625 623.347656 96.273438 L 404.945312 314.726562 L 186.542969 96.292969 C 160.664062 70.390625 118.675781 70.390625 92.777344 96.292969 C 66.898438 122.179688 66.898438 164.175781 92.777344 190.082031 L 311.179688 408.511719 L 92.246094 627.496094 C 66.367188 653.378906 66.367188 695.378906 92.246094 721.261719 C 105.171875 734.214844 122.167969 740.691406 139.117188 740.691406 C 156.066406 740.691406 173.0625 734.214844 186.011719 721.261719 L 404.921875 502.300781 L 623.304688 720.730469 C 636.253906 733.683594 653.226562 740.160156 670.175781 740.160156 C 687.125 740.160156 704.097656 733.683594 717.046875 720.730469 C 742.945312 694.847656 742.945312 652.851562 717.046875 626.964844 Z M 498.6875 408.511719 ' fill-opacity='1' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E"); } .pricing_CardsFlex .pricing_Price { font-size: 1.5rem; color: #000000; font-weight: 700; margin: 1rem 0; } .pricing_CardsFlex .pricing_Reccurence { font-size: .9rem; color: #000000; font-weight: 400; margin-left: 5px; } .pricing_CardsFlex .pricing_RecommendedReccurence { color: #000000; } .pricing_CardsFlex .pricing_Button { border: 2px solid #000000; border-radius: 0; padding: 10px 0; background: #000000; color: #ffffff; margin: 30px 0 0px 0px; font-size: 1rem; transition: all .2s linear; text-align: center; display: block; margin: auto; text-decoration: none; } .pricing_CardsFlex .pricing_Button:hover { filter: brightness(.9); } .pricing_CardsFlex .pricing_ListTitle { color: #000000; font-weight: 600; font-size: 1.3rem; margin: 20px 0; }