Free Online Comparison Table Generator

Generate free comparison table code for products, services, pricing packages, and more.

For general questions, help with code installation, bug reports, or customization inquiries, contact me here.

Here's what your table looks like so far. The pricing toggle and sticky table header JS will not work in this preview, but it will work on your site once you copy & paste your code.

Close Preview

Enter your generated HTML code to restore a table previously created with this generator:

Generated HTML

Upgrade to access this feature

Cancel

Enter column heading data:

Image src Image alt

Product/Plan Name

Pricing Option 1 (Default) Pricing Option 2

Price subtext

Button text Button link

Open in new tab Open in same tab

Mark as 'nofollow' Do not mark as 'nofollow'

Cancel

Enter feature row label:

Feature name

Cancel

Enter group name label:

Group Name

Cancel

Enter table cell data:

Icon Text

Checkmark X-mark 0 Stars Rating 0.5 Stars Rating 1 Star Rating 1.5 Stars Rating 2 Stars Rating 2.5 Stars Rating 3 Stars Rating 3.5 Stars Rating 4 Stars Rating 4.5 Stars Rating 5 Stars Rating

Cancel

Customize your table element colors:

Border color

Icons

Checkmark color 'X' color

Rows

Primary row background Include alternating row colorThis option is disabled when feature groups are enabled. Alternating row colorThis color should be a similar value (lightness or darkness) to the primary row color. Row header text (features) Row header text font size rem Table cell text Table cell text font size rem

Mobile column groups

Mobile column group background Mobile column group text

Group Section Headers

Group Row BackgroundEnable this feature in optional settings to customize this color. Group Name TextEnable this feature in optional settings to customize this color. Group name text font size rem

Star Ratings

Empty Star Color Solid Star Color

Column Headers

Column header background Empty column header backgroundIf you want the empty cell to blend into the background, set this color as the background color of the page it will appear on. Otherwise, set the color to match the primary row color. Include borders around empty cell Product/plan name Product/plan name font size rem PriceEnable this feature in optional settings to customize this color. Price font sizeEnable this feature in optional settings to customize this color. rem Price subtextEnable this feature in optional settings to customize this color. Price subtext font sizeEnable this feature in optional settings to customize this color. rem

Recommended plan

Recommended banner backgroundEnable this feature in optional settings to customize this color. Recommended banner textEnable this feature in optional settings to customize this color. Recommended banner text font sizeEnable this feature in optional settings to customize this color. rem Recommended cell backgroundEnable this feature in optional settings to customize this color.

Recommended plan button

Recommended button backgroundEnable this feature in optional settings to customize this color. Recommended button textEnable this feature in optional settings to customize this color. Include borderEnable this feature in optional settings to customize this color. Border colorEnable this feature in optional settings to customize this color.

Regular button

Button backgroundEnable this feature in optional settings to customize this color. Button textEnable this feature in optional settings to customize this color. Button text font sizeEnable this feature in optional settings to customize this color. rem Include borderEnable this feature in optional settings to customize this color. Border colorEnable this feature in optional settings to customize this color.

Upgrade to access this feature

Cancel

Select your table's optional settings:

Include image (optional) - make sure all images are the same dimensions, otherwise the formatting will look odd. This feature is only available with the Premium Comparison Table Generator Include price (optional) Include price subtext (optional) Include alternative price toggle (optional)This feature is only available with the Premium Comparison Table Generator Pricing option 1 Pricing option 2 Include button (optional) Include recommended product/plan (optional) Include feature groups (optional). This feature is only available with the Premium Comparison Table Generator How do you want your checkmarks and x-marks to display? 3 NEW ICON STYLES

Element Sizing (columns, borders, etc.):

Feature row header width px Border width px

Edit your table data below:

Table Caption

Here is the code for your table! For more customization options including unlimited rows and columns, optional feature groups, table colors and images, check out the Premium Comparison Table Generator.

Step 1.

HTML - Copy & Paste the HTML onto your site. Feeling generous? Consider helping Launch Hub Studio out by including a shoutout that appears at the end of the table HTML. It includes a "nofollow" link, so no need to worry about it interfering with SEO. I'd really appreciate it! In order for tables to be restorable with this generator, it must include an attribute that is automatically added to your table; however, if you do not want your table to include this attribute, you can uncheck this option.

Step 2.

CSS - Copy & paste right below the HTML you added in the previous step. Some web builders do not allow CSS to be added in code blocks (i.e. WordPress). In this case, you will need to copy the CSS code inside of the surrounding style tags and add it to your CSS editor.

Step 3.

JS Comparison Table Optimizations: This JS snippet ensures your table column and row headers will be sticky when scrolled both vertically and horizontally. It also contians the code for the pricing toggle if your table includes that feature. Add this snippet to your site header or footer.

<!-- Start: Comparison Table Optimizations -->
<script>
               document.addEventListener("DOMContentLoaded",function(){try{var t=document.querySelector(".comparisonTableContainer"),e=document.querySelector("header"),l=e&&"fixed"==getComputedStyle(e,null).position&&e.getBoundingClientRect().top>=0?e.offsetHeight:"0";if(t){var o=t.querySelector(".comp-table__emptyRow"),i=t.querySelectorAll(".comp-table__tableBodyRow .comp-table__tableData"),n=t.querySelector("tbody"),r=t.querySelector("thead"),s=t.querySelectorAll(".comp-table__columnHeader"),c=r.querySelector(".comp-table__columnHeaders");r.querySelectorAll(".comp-table__columnHeader:not(.comp-table__emptyCell)");var a=t.querySelector(".horizontal-scroller"),d=a.querySelector(".horizontal-scroller-content"),u=t.querySelectorAll(".comp-table__columnGroupSection");t.insertAdjacentHTML("afterbegin",'<div class="comp-table__columnGroupSection comp-table__columnGroupSectionDesktop comp-table__tableRow first comp-table__stickyRowGroupPH" style="font-weight: bold;"><div class="comp-table__tableData"><span></span></div></div>');var f=document.querySelector(".comp-table__stickyRowGroupPH")}function m(e,o){f.classList.add("stickyHeader"),f.style.top=o.height+l+"px",f.querySelector(".comp-table__tableData").style.minWidth=t.offsetWidth+"px",f.querySelector(".comp-table__tableData").style.maxWidth=t.offsetWidth+"px",f.querySelector("span").innerHTML=e.querySelector("span").innerHTML}function p(){var e,i,s,p,L=t.getBoundingClientRect(),b=r.getBoundingClientRect(),v=n.getBoundingClientRect();if(c.getBoundingClientRect(),a.style.left=L.left+"px",a.style.width=L.width+"px",d.style.width=t.scrollWidth+"px",L.top<=0+l&&L.height-50>window.innerHeight?(e=L,i=b,s=v,r.classList.add("stickyHeader"),r.style.top=l+"px",y(t),g(e),p=parseFloat(getComputedStyle(n).transform.substring(getComputedStyle(n).transform.indexOf("(")+1,getComputedStyle(n).transform.lastIndexOf(")")).split(",")[5]),(0===p||"none"==getComputedStyle(n).transform)&&(o.style.height=r.offsetHeight+"px")):v.top>=0+l&&h(),L.bottom<=window.innerHeight||L.top+l>window.innerHeight?a.style.visibility="hidden":L.top+l<=window.innerHeight&&t.clientWidth<t.scrollWidth&&(a.style.visibility="visible"),L.bottom<=b.bottom&&!Array.from(r.classList).includes("atBottom")?r.classList.add("atBottom"):b.top>=0+l&&r.classList.remove("atBottom"),(!Array.from(r.classList).includes("stickyHeader")||Array.from(r.classList).includes("atBottom"))&&(f.classList.remove("stickyHeader"),f.querySelector("span").innerHTML=""),!Array.from(r.classList).includes("atBottom"))for(let H=0;H<u.length;H++){var S=u[H];S.getBoundingClientRect().top<=b.bottom&&Array.from(r.classList).includes("stickyHeader")&&m(S,b)}}function y(t){r.scrollLeft=t.scrollLeft}function g(t){r.style.width=t.width+"px",r.style.left=t.left+"px";for(let e=0;e<s.length;e++)i[e].getBoundingClientRect(),Array.from(r.classList).includes("stickyHeader")?s[e].style.minWidth=getComputedStyle(i[e]).width:s[e].style.minWidth="initial"}function h(){r.classList.remove("stickyHeader"),r.style.top="0x",o.style.height="initial"}window.addEventListener("scroll",function(){l=e&&"fixed"==getComputedStyle(e,null).position&&e.getBoundingClientRect().top>=0?e.offsetHeight:"0",t&&p()});var L=window.innerWidth;if(window.addEventListener("resize",function(e){if(t){h(),p();var l=t.getBoundingClientRect();e.target.innerWidth<L&&(g(l),L=window.innerWidth)}}),t&&t.addEventListener("scroll",function(t){Array.from(r.classList).includes("stickyHeader")&&!Array.from(r.classList).includes("atBottom")&&y(t.target),a.scrollLeft=t.target.scrollLeft}),t&&a.addEventListener("scroll",function(e){Array.from(r.classList).includes("stickyHeader")&&!Array.from(r.classList).includes("atBottom")&&y(e.target),t.scrollLeft=e.target.scrollLeft}),t&&r.addEventListener("scroll",function(e){a.scrollLeft=e.target.scrollLeft,t.scrollLeft=e.target.scrollLeft}),t){var b=t.getBoundingClientRect();g(b),p()}var v=document.querySelector(".comp-table_pricingToggle");if(v){var H=v.querySelectorAll("input[name='annual_monthly']");for(let S=0;S<H.length;S++)H[S].addEventListener("change",function(t){for(let e=0;e<s.length;e++){var l=s[e].querySelector(".comp-table__price");l&&(l.innerHTML=l.getAttribute(t.target.value))}})}}catch(q){console.log(q)}});
            </script>
<!-- End: Comparison Table Optimizations -->

Upgrade to the Premium Generator for More Customization Options

Level-up your comparison tables with colors, feature groups, and unlimited rows and columns with the Premium Comparison Table Generator

Upgrade to Premium

**Customize your table with colors, images, buttons, and text.**

Create a table that perfectly matches your brand with customizable color options
You decide how your table looks by choosing optional images, buttons, text, and icons to make a comparison table that perfectly fits your needs.
Easily generate your custom table by utilizing a user-friendly interface that requires no coding skills whatsoever

**Create multiple table groups for better clarity**

Provide a more comprehensive comparison experience by adding table groups for related sets of feat

**Mobile-first table design**

Table row headers become column groups on mobile for an optimized vertical scrolling experience
Column headers become sticky when scrolled past to maintain row context

EXAMPLES FROM CUSTOMERS

See how our customers use the Premium Comparison Table Generator to enhance their websites

Upgrade to Premium

LinkdHome

LinkdHome is a business of IT professionals who offer smart home advice. This product comparison table is used to compare different brands of ceiling fans for Smart Homes.

ELXR

Elxr is a platform that grows businesses, monetizes content, manages clients, and generates recurring revenue for life for health and wellness professionals. They use a comparison table to show why they are a better choice for their competitors.

MakeGoodApp

MakeGoodApp helps businesses maximize cash flow and prevent past-due accounts by managing client invoice payments.