Comparison Table Widget

Compare your product with alternatives, or several models of your own, in a table that keeps the feature names in view while it scrolls sideways on phones and spells out Yes, No and Partial next to every tick and cross.

Page Components Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
One item per line. Long content is carried after the # in the embed code, so it never reaches a server.
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/comparison-table" title="Comparison Table by A2Z Tools" width="100%" height="900" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Put the column names on one line ('Our app | Competitor A | Competitor B', up to six) and the rows underneath, one feature per line: 'Free plan | yes - up to 3 users | no | no'. The first word of a cell decides its status: yes, true, included or a tick gives a green tick and the word Yes; no, none, false or a cross gives No; partial, limited, some or ~ gives Partial; whatever follows after a dash, colon or brackets becomes a small note ('add-on'). Single letters count only as a whole cell, so 'x' is No but 'X-ray' is text. Other text is shown as written, and an empty cell, '-' or '?' reads 'Not stated'. '## Group' lines become full-width row-group headings (th scope=rowgroup). Column headers use scope=col and features scope=row. The table sits in a region with tabindex=0 labelled by its caption, so keyboard users can scroll it; the feature column stays put, and a soft shadow appears on the right only when there is more to scroll.

Method

  • Columns: v_columns = 'A | B | C' (max 6); rows: v_rows = 'Feature | cell for A | cell for B ...' (max 80); '## Group' = row group
  • Cell status: ^(yes|true|included|available|tick) -> Yes; ^(no|false|none|not included|cross) -> No; ^(partial|limited|some|~) -> Partial; y/n/x only as the whole cell
  • Note = text after the keyword, minus leading - : , ; and surrounding brackets; empty, '-' or '?' = Not stated
  • Markup: <caption>; <th scope=col> per column; <th scope=row> per feature; <th scope=rowgroup colspan=n> per group
  • v_highlight = column number or name (default 1, 0 = none); v_labels=0 hides the words visually but keeps them for screen readers

Worked examples

Status with a note

Inputs: Live chat widget | yes | partial - add-on | yes

Result: Tick 'Yes' | dash 'Partial' with note 'add-on' | tick 'Yes'; screen reader: 'Partial, add-on'

Text after the keyword and separator becomes the note.

Letters versus words

Inputs: Cells 'x', 'X-ray' and '' (empty)

Result: No | X-ray (shown as text) | Not stated

y, n and x count only when they are the whole cell.

Limitations

  • Values are whatever you type - the widget does not fetch or check competitors' features or prices.
  • Up to 6 compared columns and 80 rows; very wide tables are better split by topic.
  • No sorting, filtering or 'show differences only' toggle.
  • Cells are text only - no images, links or star ratings inside the table.

Where publishers use it

  • A 'Why choose us' section on a SaaS site comparing your plan with two named competitors
  • An affiliate review on WordPress comparing four robot vacuums by battery, suction and app
  • A hosting company's page contrasting shared, VPS and dedicated plans
  • A university course page comparing full-time, part-time and online study modes
  • An estate agent comparing three properties by bedrooms, garden, parking and council tax band

Questions

Why do the cells show words as well as ticks?

Colour or an icon alone is not enough: WCAG 1.4.1 says colour must not be the only visual means of conveying information, and a tick or cross can be unclear to some readers or invisible to a screen reader. Every status cell shows a shape (tick, cross or dash) and the word Yes, No or Partial; if you hide the words with v_labels=0, a legend appears under the table and the words stay available to assistive technology.

How does it behave on a phone?

The table keeps its columns and scrolls sideways inside its own box; the page itself never scrolls horizontally. The feature names stay pinned on the left. The scroll box has tabindex=0 and is labelled by the caption, so keyboard users can focus it and use the arrow keys.

Is it fair to name competitors?

Comparative advertising is allowed in many places only when it is accurate, verifiable and compares like with like. Date your comparison in v_note (for example 'Prices checked 1 October 2026 on each vendor's pricing page'), link sources on your page and update the embed when competitors change. A2Z does not check any of the values.

Can I add a note to a Yes or No?

Yes: 'yes (unlimited)', 'partial - paid tier only' or 'no: planned for 2027' keep the status and show the rest as a small grey note. Screen readers hear 'Partial, paid tier only'.

How do I highlight my own column?

v_highlight=1 (the default) tints the first column and marks its header with an accent bar; use another number or the exact column name, or 0 for no highlight. The tint is decoration only - the column header text already says which product it is.

Sources

  1. Tables with two headers - W3C Web Accessibility Initiative . scope=col and scope=row associate header cells with data cells.
  2. Understanding Success Criterion 1.4.1: Use of Color - W3C WCAG 2.2 . Colour is not used as the only visual means of conveying information.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Comparison Table
https://a2z.tools/embed/comparison-table

Related widgets

More Page Components widgets →

  • Pricing Table

    Page Components Tool New

    Two to five plan cards with a monthly/yearly switch, saving %, highlighted plan and comparison mode.

    Get code

  • Checklist Widget

    Page Components Tool New

    A tick-off checklist with sections, progress, copy and print - saved only on the visitor's device.

    Get code

  • Star Rating Display

    Page Components Tool New

    Your average rating, review count and star breakdown bars, with a link to where the reviews live.

    Get code

  • Text Compare (Diff)

    SEO & Content Tool

    Compare two versions of a text line by line or word by word, with additions and removals marked.

    Get code

  • FAQ Accordion

    Page Components Tool New

    Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.

    Get code

  • Image Gallery with Lightbox

    Page Components Tool New

    Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.

    Get code

Preview

CustomizeGet code