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.

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