Detailed Pricing Table Template

Guide user choice and drive sign-ups with this detailed and visually engaging pricing table.

This template is designed not just to display information, but to help sell. It features a highlighted column to draw attention to your preferred plan and prominent call-to-action buttons.

Screenshot of a stylish pricing table with a highlighted 'Pro' plan and call-to-action buttons.

Get Source Code Preview

About this Detailed Pricing Table

Moving beyond a basic grid, this pricing table uses modern styling to create a compelling comparison. Each plan is presented as a distinct column with strong visual separation. A dedicated CSS class makes it easy to highlight one column as the "Most Popular" or "Best Value" option, guiding customers toward a specific choice. The inclusion of call-to-action buttons directly within the table streamlines the conversion process.

Features

Highlighted Plan: A special class to make one column stand out with different colors and a badge.
Call-to-Action Buttons: Prominent, styled buttons are integrated into each plan.
Modern & Clean Aesthetics: Uses rounded corners, shadows, and clear typography for a professional look.
CSS-Only Interactivity: Subtle hover effects on buttons provide user feedback without needing JavaScript.
Responsive by Nature: Designed with horizontal scrolling in mind for smaller screens to keep all details accessible.

Ideal Use Cases

Primary pricing page for a SaaS or software product.
Comparing service tiers on a marketing landing page.
Any situation where you want to guide users to a specific, recommended pricing option.

Dependencies

None. This template uses only pure HTML and CSS.

Code

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

.pricing-table-detailed th, 
.pricing-table-detailed td {
    padding: 20px;
    vertical-align: middle;
}

/* Feature Name (First Column) */
.pricing-table-detailed tbody th {
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.pricing-table-detailed tbody td {
    border-bottom: 1px solid #f0f0f0;
    color: #555;
}

/* Plan Column Headers */
.pricing-table-detailed .plan-header {
    background: #fff;
    border-bottom: 2px solid #e9ecef;
}
.pricing-table-detailed .plan-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.pricing-table-detailed .plan-price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #1d2d35;
}
.pricing-table-detailed .plan-price span {
    font-size: 1rem;
    font-weight: 300;
    color: #777;
}

/* Call-to-action button */
.pricing-table-detailed .btn-select {
    display: inline-block;
    padding: 12px 30px;
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #3498db;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}
.pricing-table-detailed .btn-select:hover {
    background-color: #2980b9;
}

/* ---- Highlighted Plan Styling ---- */
.pricing-table-detailed .plan-highlight {
    background-color: #fcfcfc;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    border: 2px solid #3498db;
    border-radius: 8px;
    position: relative;
    transform: scale(1.05); /* Makes the column slightly larger */
    z-index: 10;
}
.pricing-table-detailed .plan-highlight .plan-header {
    background-color: #ebf5fb;
    border-radius: 6px 6px 0 0;
}
.pricing-table-detailed .plan-highlight .btn-select {
    background-color: #e67e22;
}
.pricing-table-detailed .plan-highlight .btn-select:hover {
    background-color: #d35400;
}
.pricing-table-detailed .popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3498db;
    color: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}
/* ---- End Highlighted Styling ---- */

.pricing-table-detailed .check { color: #2ecc71; font-size: 1.2rem; }
.pricing-table-detailed .cross { color: #e74c3c; font-size: 1.2rem; }
</style>

<div class="pricing-table-container">
    <table class="pricing-table-detailed">
        <thead>
            <tr>
                
                <th style="border:none; background:transparent;"></th>
                <th class="plan-header">
                    <div class="plan-name">Starter</div>
                    <div class="plan-price">$12<span>/mo</span></div>
                    <a href="#" class="btn-select">Choose Plan</a>
                </th>
                <th class="plan-header plan-highlight">
                    <div class="popular-badge">Most Popular</div>
                    <div class="plan-name">Pro</div>
                    <div class="plan-price">$35<span>/mo</span></div>
                    <a href="#" class="btn-select">Choose Plan</a>
                </th>
                <th class="plan-header">
                    <div class="plan-name">Business</div>
                    <div class="plan-price">$79<span>/mo</span></div>
                    <a href="#" class="btn-select">Choose Plan</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Team Members</th>
                <td>1</td>
                <td>5</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <th scope="row">Project Storage</th>
                <td>2 GB</td>
                <td>20 GB</td>
                <td>200 GB</td>
            </tr>
            <tr>
                <th scope="row">Live Chat Support</th>
                <td><span class="cross">✗</span></td>
                <td><span class="check">✓</span></td>
                <td><span class="check">✓</span></td>
            </tr>
            <tr>
                <th scope="row">Custom Branding</th>
                <td><span class="cross">✗</span></td>
                <td><span class="cross">✗</span></td>
                <td><span class="check">✓</span></td>
            </tr>
        </tbody>
    </table>
</div>

View Output