Comparison table for websites
Write the columns and the rows. Use yes and no (or y and n) to get ✓ and ✗; any other text appears as is.
How to useCompare plans and products side by side
Comparison table for websites: what it is for
A comparison table helps customers decide between plans, products or services without having to ask. Write the columns and rows, using yes and no to get ✓ and ✗, and choose a column to highlight with a border and a badge.
On phones the table scrolls sideways with the first column fixed. The HTML uses a table with th and scope and hidden Yes and No text next to the symbols, so screen readers read each cell with the right header.
How to use
- Write the columns separated by a vertical bar.
- Write each row with the value for each column.
- Choose the highlight and copy the code.
When to use it
- Comparing the plans of a service.
- Comparing product models.
- Showing how you differ from the competition.
Frequently asked questions
How does it look on phones?
The table scrolls sideways inside a box, and the first column, with the name of each item, stays fixed while scrolling. That way people never lose track of what they are comparing.
Are the ✓ and ✗ symbols accessible?
Each symbol comes with hidden text (Yes or No) for screen readers, and the table uses th with scope on rows and columns, so each cell is announced with the right header.
What is the highlighted column for?
To draw attention to the option you recommend, with a border and a badge. Use it on one column only; highlighting several cancels the effect.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.