webdevpuneet.com

Related Snippets

57 in Pricing category
45–50 of 57

Pricing Feature Table

ROI Calculator

Pricing Slider

Plan Selector

Money-Back Guarantee

Trial Countdown Banner

Pricing Feature Table — Free HTML CSS JS Plan Compare Table

Pricing Feature Table · Pricing · Plain HTML, CSS & JS · Live preview

CategoryPricing
TagsE-CommerceLanding PageData Tables

Copy & paste

Source Code

<div class="pf-wrap">
  <table class="pf-table" id="pfTable">
    <thead>
      <tr>
        <th class="pf-corner">Compare plans</th>
        <th><div class="pf-plan">Free<span>$0</span></div></th>
        <th class="pf-pop"><div class="pf-plan">Pro<span>$29</span><em>Popular</em></div></th>
        <th><div class="pf-plan">Team<span>$79</span></div></th>
      </tr>
    </thead>
    <tbody>
      <tr><th>Projects</th><td>3</td><td class="pf-pop">Unlimited</td><td>Unlimited</td></tr>
      <tr><th>Team members</th><td>1</td><td class="pf-pop">10</td><td>Unlimited</td></tr>
      <tr><th>Analytics</th><td data-no></td><td class="pf-pop" data-yes></td><td data-yes></td></tr>
      <tr><th>Custom domains</th><td data-no></td><td class="pf-pop" data-yes></td><td data-yes></td></tr>
      <tr><th>Priority support</th><td data-no></td><td class="pf-pop" data-no></td><td data-yes></td></tr>
      <tr><th>SSO &amp; SAML</th><td data-no></td><td class="pf-pop" data-no></td><td data-yes></td></tr>
      <tr class="pf-cta"><th></th><td><button type="button">Choose</button></td><td class="pf-pop"><button type="button" class="pf-primary">Choose</button></td><td><button type="button">Choose</button></td></tr>
    </tbody>
  </table>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Semantic table
thead and row th for accessible structure.
CSS check marks
Masked SVG ticks from a data attribute.
Popular column
Tinted band, pill, and primary CTA.
Column hover
Highlights a whole plan column to scan.
Horizontal scroll
Wrapper scrolls on narrow screens.
Per-plan CTA row
Choose buttons read their plan name.
One-char toggles
data-yes / data-no flip a feature.
Index-driven logic
Adapts to any column count.

About this UI Snippet

Pricing Feature Table — Compare Plans Feature by Feature

Screenshot of the Pricing Feature Table snippet rendered live

The pricing feature table is the side-by-side plan comparison you scroll to when a three-card pricing block isn't enough — a grid of features down the side and plans across the top, with ticks and dashes showing what each tier includes. This snippet builds an accessible, responsive one with a semantic HTML table, CSS, and a small JavaScript enhancement for column highlighting.

A real, semantic table

The comparison is a genuine <table> with <thead> plan headers and row <th> feature labels, so it conveys structure to screen readers and is easy to scan and maintain. border-collapse plus a rounded, clipped wrapper gives it a card-like finish without losing table semantics. On narrow screens the wrapper scrolls horizontally (overflow-x: auto) so columns never crush — the standard responsive pattern for wide comparison tables.

Check marks without icon fonts

Whether a plan includes a feature is expressed with a single data-yes or data-no attribute on the cell — no images, no icon font. A green circular check is drawn entirely in CSS by masking a circle with an inline SVG tick via -webkit-mask/mask, and a missing feature shows a muted en dash. Because the mark is generated from a data attribute, toggling a feature is a one-character markup change and the table stays clean.

Highlighting the popular plan

The recommended column carries a pf-pop class on each of its cells, which paints a subtle tinted band down the whole column and adds a "Popular" pill and a filled primary button in that plan's header and CTA row. This vertical highlight is what draws the eye to the plan you want to sell without a separate floating card.

Column hover scanning

Long comparison tables are hard to read across, so a small script highlights the entire column you're hovering. On mouseenter of any cell it tints every cell sharing that cellIndex, and clears it on mouseleave — making it easy to trace one plan's row of values down a tall table. The row-label column is skipped so only plan columns light up.

CTA row

The final row holds a "Choose" button per plan, with the popular plan's button styled as the primary action. Clicking reads the plan name from the header cell at the same column index and logs it — the hook where you'd start checkout or selection.

Customizing it

Add or remove feature rows and plan columns freely; the structure and hover logic adapt by column index. Change the accent, the tint of the popular band, or the check colour. Pair it with a pricing card block above it, a pricing toggle for monthly/yearly, and a pricing faq below.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA three-plan comparison table renders.
  2. 2
    Scan the featuresTicks and dashes show what each plan includes.
  3. 3
    Hover a columnThe whole plan column highlights for scanning.
  4. 4
    Note the popular planPro shows a tinted band, pill, and primary CTA.
  5. 5
    Click ChooseThe handler logs the selected plan.
  6. 6
    Edit a featureToggle data-yes / data-no on a cell.

Real-world uses

Common Use Cases

Detail section under pricing cards
Place the table beneath a pricing card block for visitors who scroll down to compare every feature across plans before committing to one.
Billing period switch above the table
Pair it with a pricing toggle so the full feature comparison sits right under the monthly and annual switch for visitors weighing their options.
Answering objections before checkout
Put the table directly above a pricing FAQ, so a hesitant buyer can verify a limit and then read the answer without leaving the page.
Enterprise and custom plans
Add a column for large teams and link it to enterprise pricing or a sales contact when the top tier needs a conversation instead of a fixed price.
Accessible plan comparison
The semantic thead and row headers let screen readers announce each plan and feature, while the tinted popular column and column hover guide sighted visitors toward the tier you want to sell.
In-app upgrade comparison
Reuse the table inside account settings next to an upgrade banner to show free users exactly what the next plan unlocks.
Related: Custom Quote Request Form
See the Custom Quote Request Form for a related pricing pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Each cell carries a data-yes or data-no attribute. A green circular check is rendered in CSS by masking a coloured circle with an inline SVG tick via mask and -webkit-mask, and a missing feature shows a muted en dash. Toggling a feature is a one-character markup change, with no icon font or image files.

Every cell in the recommended column carries a pf-pop class that paints a subtle tinted band down the column, and the header and CTA row add a Popular pill and a filled primary button. This vertical highlight draws the eye to the plan you want to sell without needing a separate floating card.

Wide comparison tables are hard to read across, so on mouseenter of any cell the script tints every cell sharing the same cellIndex, then clears it on mouseleave. This lets you trace one plan's values down a tall table; the row-label column is skipped so only plan columns light up.

Yes. The table sits in a wrapper with overflow-x: auto, so on narrow screens it scrolls horizontally instead of crushing the columns, and a media query tightens the padding and font size. This is the standard responsive approach for comparison tables too wide to reflow.

Render the rows from a features array and the columns from a plans array, outputting data-yes/data-no from each plan's feature map. Drive the popular class from a plan flag. For column hover, store a hovered column index in state and apply a highlight class by index rather than mutating styles directly. The table and mask CSS port unchanged.