Simple Pricing Table Template

Clearly display your pricing plans or service tiers with this simple and clean pricing table.

This template provides a professional, easy-to-read layout for presenting different options to your users, helping them to quickly understand your offerings.

Screenshot of a simple pricing table showing three different service plans with their features and prices.

Get Source Code → Preview →

About this Simple Pricing Table

This pricing table template is designed for clarity and simplicity. It uses a standard table structure to present features in rows and plans in columns. The design is clean and minimal, with a visually distinct header for the plan names and prices, and simple checkmarks to indicate feature availability. It's a lightweight and easy-to-customize solution for any website needing to display tiered options.

Key Features:

Clear & Simple Layout: An intuitive grid format that's easy for users to scan and compare.
Lightweight Design: Uses clean CSS without extra visual clutter, ensuring fast loading times.
Unicode Icons: Uses simple text-based checkmarks (HTML entities) for a clean look without needing an icon font library.
Responsive: A container allows the table to scroll horizontally on small screens, preventing layout issues.

Ideal Use Cases:

Showcasing SaaS subscription plans.
Comparing different service packages (e.g., for consulting or freelance work).
Listing membership tiers for a club or organization.

Dependencies:

None. This template uses only pure HTML and CSS.

Accessibility Notes:

This table is built with accessibility in mind. Headers for both columns (th with scope="col") and rows (th with scope="row") are used. This allows a screen reader user to correctly associate each checkmark or piece of data with its corresponding feature and plan.

Code

Here's the full code for the simple pricing table:

.pricing-table-simple caption {
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 20px;
    color: #333;
}

.pricing-table-simple th,
.pricing-table-simple td {
    border: 1px solid #e0e0e0;
    padding: 15px;
}

/* Feature column (first header in each row) */
.pricing-table-simple .feature-name {
    text-align: left;
    font-weight: bold;
}

/* Plan names and prices in the header */
.pricing-table-simple thead th {
    background-color: #f8f9fa;
    vertical-align: bottom;
}
.pricing-table-simple .plan-name {
    font-size: 1.2rem;
    font-weight: 600;
}
.pricing-table-simple .plan-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 5px 0;
}
.pricing-table-simple .plan-period {
    font-size: 0.8rem;
    color: #666;
}

/* Checkmark styling */
.pricing-table-simple .check {
    color: #27ae60;
    font-size: 1.5rem;
    font-weight: bold;
}
</style>

<div class="pricing-table-container">
    <table class="pricing-table-simple">
        <caption>Our Service Plans</caption>
        <thead>
            <tr>
                <th scope="col" class="feature-name">Features</th>
                <th scope="col">
                    <div class="plan-name">Bronze</div>
                    <div class="plan-price">$19</div>
                    <div class="plan-period">per month</div>
                </th>
                <th scope="col">
                    <div class="plan-name">Silver</div>
                    <div class="plan-price">$49</div>
                    <div class="plan-period">per month</div>
                </th>
                <th scope="col">
                    <div class="plan-name">Gold</div>
                    <div class="plan-price">$99</div>
                    <div class="plan-period">per month</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" class="feature-name">Data Storage</th>
                <td>5 GB</td>
                <td>50 GB</td>
                <td>500 GB</td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Project Limit</th>
                <td>10</td>
                <td>50</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Email Support</th>
                <td><span class="check">&check;</span></td>
                <td><span class="check">&check;</span></td>
                <td><span class="check">&check;</span></td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Phone Support</th>
                <td>Â </td>
                <td><span class="check">&check;</span></td>
                <td><span class="check">&check;</span></td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Dedicated Agent</th>
                <td>Â </td>
                <td>Â </td>
                <td><span class="check">&check;</span></td>
            </tr>
        </tbody>
    </table>
</div>

View Output