How to create pricing table in html

HtmlHow-ToBeginner · 4 min read

How to Create a Pricing Table in HTML: Simple Guide

To create a pricing table in HTML, use a <table> element with rows and columns representing plans and features. Add headings with <th> and data cells with <td>, then style it with CSS for clarity and responsiveness.

📐

Syntax

A pricing table uses the <table> element to organize data in rows and columns. Use <thead> for the header row with <th> cells for plan names or features. Use <tbody> for the main content with <tr> rows and <td> cells for prices and details.

<table>: Container for the whole table.
<thead>: Header section with column titles.
<tbody>: Body section with pricing data.
<tr>: Table row.
<th>: Header cell, usually bold and centered.
<td>: Data cell with plan details.

html

<table>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
      <th>Features</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>$10/mo</td>
      <td>Feature A, Feature B</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$20/mo</td>
      <td>Feature A, Feature B, Feature C</td>
    </tr>
  </tbody>
</table>

💻

Example

This example shows a simple pricing table with three plans. It uses HTML for structure and CSS for styling to make it clear and easy to read.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pricing Table Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background: #f9f9f9;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    max-width: 600px;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  thead {
    background-color: #007BFF;
    color: white;
  }
  th, td {
    padding: 15px;
    text-align: center;
    border: 1px solid #ddd;
  }
  tbody tr:hover {
    background-color: #f1f1f1;
  }
  .highlight {
    background-color: #e0f7fa;
    font-weight: bold;
  }
  @media (max-width: 480px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    thead tr {
      display: none;
    }
    tbody tr {
      margin-bottom: 15px;
      border: 1px solid #ddd;
      padding: 10px;
      background: white;
    }
    tbody td {
      text-align: right;
      padding-left: 50%;
      position: relative;
    }
    tbody td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      width: 45%;
      padding-left: 10px;
      font-weight: bold;
      text-align: left;
    }
  }
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
      <th>Features</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Plan">Basic</td>
      <td data-label="Price">$10/mo</td>
      <td data-label="Features">Feature A, Feature B</td>
    </tr>
    <tr class="highlight">
      <td data-label="Plan">Pro</td>
      <td data-label="Price">$20/mo</td>
      <td data-label="Features">Feature A, Feature B, Feature C</td>
    </tr>
    <tr>
      <td data-label="Plan">Enterprise</td>
      <td data-label="Price">Contact Us</td>
      <td data-label="Features">All Features + Support</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Output

A clean, centered pricing table with three columns: Plan, Price, and Features. The header row has a blue background with white text. Rows highlight on hover. The 'Pro' plan row is highlighted with a light blue background. On small screens, the table stacks vertically with labels before each data cell.

⚠️

Common Pitfalls

Common mistakes when creating pricing tables include:

Not using semantic <table> elements, which hurts accessibility.
Forgetting to add <thead> and <th> for headers, making the table hard to understand.
Not styling the table for readability or responsiveness, causing it to look cluttered or break on small screens.
Using inline styles or deprecated tags like <font> instead of CSS.

Here is an example of a common mistake and the correct way:

html

<!-- Wrong: No headers, no semantic tags -->
<table>
  <tr>
    <td>Basic</td>
    <td>$10</td>
    <td>Feature A</td>
  </tr>
  <tr>
    <td>Pro</td>
    <td>$20</td>
    <td>Feature A, B</td>
  </tr>
</table>

<!-- Right: Using headers and semantic tags -->
<table>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
      <th>Features</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>$10</td>
      <td>Feature A</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$20</td>
      <td>Feature A, B</td>
    </tr>
  </tbody>
</table>

📊

Quick Reference

Tips for creating effective pricing tables:

Use <table> with <thead> and <tbody> for structure.
Label columns clearly with <th>.
Style with CSS for readability and highlight popular plans.
Make tables responsive for mobile devices using media queries.
Ensure good color contrast for accessibility.

✅

Key Takeaways

Use semantic <table>, <thead>, <tbody>, <th>, and <td> tags for clear structure.

Style your pricing table with CSS to improve readability and highlight important plans.

Make your table responsive so it works well on small screens by stacking cells vertically.

Avoid inline styles and deprecated HTML tags; use CSS for all styling.

Always include clear headers and labels for accessibility and user understanding.