A pricing comparison table section built with pure HTML and CSS that presents multiple plans in a structured row-and-column layout. It allows users to evaluate feature availability across tiers with clear alignment and readable hierarchy.
Usage
Use this component when detailed multi plan feature comparison is required, such as SaaS subscriptions, enterprise packages, service bundles, or product tiers that differ in capabilities and limits.
Implementation
The structure uses tabular alignment principles with consistent feature rows and plan columns. CSS controls spacing, border styling, responsive stacking, and scroll behavior to maintain readability on smaller screens.
HTML
<section class="pricing-compare">
<h2>Compare Plans</h2>
<p class="subtitle">See what’s included in each plan</p>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Features</th>
<th>Starter</th>
<th class="highlight">Pro</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Projects</td>
<td>3</td>
<td class="highlight">Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Team Members</td>
<td>1</td>
<td class="highlight">10</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Storage</td>
<td>5 GB</td>
<td class="highlight">100 GB</td>
<td>1 TB</td>
</tr>
<tr>
<td>Analytics</td>
<td>—</td>
<td class="highlight">✔</td>
<td>✔</td>
</tr>
<tr>
<td>Priority Support</td>
<td>—</td>
<td class="highlight">✔</td>
<td>✔</td>
</tr>
<tr>
<td>Custom Integrations</td>
<td>—</td>
<td>—</td>
<td>✔</td>
</tr>
</tbody>
</table>
</div>
</section>CSS
:root {
--bg: #f8fafc;
--card: #ffffff;
--text: #0f172a;
--muted: #64748b;
--primary: #2563eb;
--border: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #020617;
--card: #0f172a;
--text: #e5e7eb;
--muted: #94a3b8;
--primary: #3b82f6;
--border: #1e293b;
}
}
.pricing-compare {
background: var(--bg);
padding: 32px 16px;
color: var(--text);
}
.pricing-compare h2 {
text-align: center;
font-size: 1.4rem;
margin-bottom: 6px;
}
.pricing-compare .subtitle {
text-align: center;
font-size: 0.9rem;
color: var(--muted);
margin-bottom: 20px;
}
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
background: var(--card);
border-radius: 14px;
overflow: hidden;
}
th,
td {
padding: 14px 12px;
text-align: center;
font-size: 0.85rem;
border-bottom: 1px solid var(--border);
}
th:first-child,
td:first-child {
text-align: left;
}
thead th {
font-size: 0.8rem;
color: var(--muted);
background: rgba(0, 0, 0, 0.02);
}
.highlight {
background: rgba(37, 99, 235, 0.08);
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.highlight {
background: rgba(59, 130, 246, 0.18);
}
}
tbody tr:last-child td {
border-bottom: none;
}
@media (max-width: 480px) {
th,
td {
padding: 10px 8px;
font-size: 0.75rem;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Enables structured feature-by-feature comparison
- Maintains consistent column alignment
- Fully responsive across breakpoints
- Supports horizontal scroll for mobile devices
- Ideal for SaaS and subscription pricing pages
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.