Design Atlas
한국어
▭ Landing page patterns

Comparison table

비교 테이블

A row-by-column table that lines up feature availability across plans (or competitors) for direct comparison.

Also known as: Feature comparisonPlan comparison table
···
html
<table class="cmp">
  <thead><tr><th></th><th>Basic</th><th class="hl">Pro</th><th>Enterprise</th></tr></thead>
  <tbody>
    <tr><td>Projects</td><td>3</td><td class="hl">Unlimited</td><td>Unlimited</td></tr>
    <tr><td>Storage</td><td>5GB</td><td class="hl">100GB</td><td>1TB</td></tr>
    <tr><td>SSO</td><td class="x">&times;</td><td class="hl ok">&check;</td><td class="ok">&check;</td></tr>
    <tr><td>Priority support</td><td class="x">&times;</td><td class="hl x">&times;</td><td class="ok">&check;</td></tr>
  </tbody>
</table>
css
.cmp{width:min(92%,700px);border-collapse:collapse;font-size:clamp(7px,1.5vmin,11px)}
.cmp th,.cmp td{padding:clamp(4px,1.2vmin,9px) clamp(6px,1.6vmin,10px);text-align:center;border-bottom:1px solid var(--line)}
.cmp th{color:var(--muted);font-weight:700;font-size:.95em}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--fg);font-weight:600}
.hl{background:color-mix(in oklab,var(--accent) 10%,transparent)}
th.hl{color:var(--accent);border-radius:6px 6px 0 0}
.ok{color:var(--accent-3);font-weight:800}
.x{color:var(--muted);opacity:.5}
.cmp tbody td.ok,.cmp tbody td.x{display:inline-block;animation:pop 2.4s ease-in-out infinite}
.cmp tbody tr:nth-child(2) td.ok,.cmp tbody tr:nth-child(2) td.x{animation-delay:.1s}
.cmp tbody tr:nth-child(3) td.ok,.cmp tbody tr:nth-child(3) td.x{animation-delay:.2s}
.cmp tbody tr:nth-child(4) td.ok,.cmp tbody tr:nth-child(4) td.x{animation-delay:.3s}
@keyframes pop{0%,80%,100%{transform:scale(1)}90%{transform:scale(1.25)}}

Used when there are too many features for `pricing-table`'s short checklist to cover. Feature names run down the left column, plans (or competitors) run across the top, and each cell holds a check, an X, or a concrete value — a quota, a count.

The recommended (or your own) plan's column usually gets a subtly different background or a stronger border so the eye lands there first even inside a dense table. Group features by category — "Collaboration," "Security," "Support" — with dividers, so the table stays navigable as rows pile up.

Rows of bare checkmarks with no numbers, just "Unlimited" everywhere, read as vague. Real values ("100GB storage") build more trust where they exist. On mobile, columns overflow easily — plan for horizontal scroll or collapse into per-plan cards.

When to use

Use when there are more than about three plans or the feature differences are granular. With two or three simple plans, `pricing-table`'s checklist is enough on its own.