OneTaskBy Tim King · Updated
Feature Comparison Table Generator
Accessible Plan Comparison in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Feature Comparison Table works
A feature comparison table lines up your plans side by side so visitors can see exactly what each one includes. Enter your plans and features, use yes and no for ticks and dashes, pick a plan to highlight, and copy the HTML and CSS.
Pricing cards sell the headline differences, and a comparison table below them answers the detailed questions. Buyers who are close to deciding scroll down to check one specific feature, so the table should be easy to scan row by row.
How the feature comparison table stays accessible
It is a real <table> with a <caption>, column headers for the plans and row headers for the
features, so screen readers announce "Pro, Custom domain" as a user moves through the cells. A tick
or dash on its own means nothing when read aloud, so each one is hidden from screen readers and
paired with visually hidden text that says "Included" or "Not included".
Phones
Tables with several plans do not fit a narrow screen. The table sits in a scrolling wrapper with a minimum width, and the feature column is sticky, so the feature name stays in view as the plans scroll sideways. The wrapper is focusable so keyboard users can scroll it too.
FAQ
Should I use a table or cards for pricing?
Both. Cards work best for the first impression with three or four key points each, and a full comparison table underneath covers every feature for people who want the detail.
Why not show a cross for features that are not included?
A row of red crosses makes the cheaper plans look broken. A light grey dash reads as "not in this plan" without drawing the eye, keeping attention on what each plan does include.
How many features should the table have?
Include the features people actually compare, often ten to twenty. For longer lists, split the table into groups with a heading row for each, such as Collaboration, Security and Support.
Can I put buttons at the bottom of each column?
Yes. Add a final row with an empty first cell and a link styled as a button in each plan cell, so visitors who reach the end of the table can sign up without scrolling back up.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Pricing Table Builder
Build a responsive pricing table of plans with a featured one.
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.
Comparison Card Builder
Side-by-side comparison cards with ticks, crosses and a highlighted column.
Pricing Toggle
Build a monthly and yearly price switch with no JavaScript.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.