{"id":4878,"date":"2026-10-29T05:38:26","date_gmt":"2026-10-29T05:38:26","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/comparison-table\/"},"modified":"2026-11-04T05:17:17","modified_gmt":"2026-11-04T05:17:17","password":"","slug":"comparison-table","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/comparison-table\/","title":{"rendered":"Comparison Table"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Comparison Table Block puts plans or products side by side in a real table. Each column is a plan or a product with its name, price and button; each row is a feature with a tick, a cross, a dash or a short text in every column. One column can be highlighted as the one you recommend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it for pricing plans, product comparisons, service tiers, \u201cus versus them\u201d tables, sizes and specifications, or opening hours. On phones it shows one column at a time with a switch above it, or scrolls sideways with the labels held in place.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Create a Comparison Table in WordPress Gutenberg | ShapeBlock Pro Comparison Table\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/BuFP3GsvXt8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Comparison Table Block<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Comparison Table Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n\n<li>Search for <strong>Comparison Table<\/strong> under ShapeBlock Pro.<\/li>\n\n\n\n<li>Insert the block. It starts with three plans and five rows to edit.<\/li>\n\n\n\n<li>Type the names, subtitles, prices, button text and row labels right on the table.<\/li>\n\n\n\n<li>Click a tick, cross or dash on the table to change it to the next one.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-1.webp\" alt=\"Comparison Table block in the block inserter\" class=\"wp-image-4874\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-1.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-1-600x375.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-1-300x188.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-1-1024x640.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-1-768x480.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Comparison Table Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the block and open its settings in the right-hand sidebar. The tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> The columns, the rows and what the table shows.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Column widths, spacing, the sticky head and the phone view.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Colours, typography, borders and buttons.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Spacing and background of the whole block, plus the shared ShapeBlock Pro options.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-2.webp\" alt=\"Comparison Table Settings tab\" class=\"wp-image-4875\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-2-600x375.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-2-300x188.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-2-1024x640.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-2-768x480.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Columns<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Highlight This Column:<\/strong> Frames the column in the accent colour and gives it its own background. On phones the table opens on this column.<\/li>\n\n\n\n<li><strong>Badge:<\/strong> A small label above the name, for example <em>Most popular<\/em>.<\/li>\n\n\n\n<li><strong>Button Link:<\/strong> The address of the column\u2019s button, with <strong>Open in a New Tab<\/strong>.<\/li>\n\n\n\n<li><strong>Image:<\/strong> A product photo or logo at the top of the column (when Show Images is on).<\/li>\n\n\n\n<li><strong>Up, Down, Remove, Add Column:<\/strong> Order the columns, take one out, or add one (up to six). The values in every row move with their column.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Rows<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Group Heading:<\/strong> Turns the row into a heading that starts a group of rows, such as <em>Delivery<\/em> or <em>Support<\/em>.<\/li>\n\n\n\n<li><strong>Tooltip:<\/strong> A short explanation shown next to the label when a visitor points at the question mark or taps it.<\/li>\n\n\n\n<li><strong>Value per column:<\/strong> Tick, Cross, Dash or Text. For a tick or a cross you can add a short note shown under it, for example <em>Twice a year<\/em>.<\/li>\n\n\n\n<li><strong>Up, Down, Remove, Add Row, Add Group Heading:<\/strong> Order and add rows.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Table<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show Images:<\/strong> A photo or logo at the top of each column.<\/li>\n\n\n\n<li><strong>Show Prices:<\/strong> The price and the period (for example <em>\/month<\/em>) under each name.<\/li>\n\n\n\n<li><strong>Buttons:<\/strong> At the Top, At the Bottom, Top and Bottom, or None.<\/li>\n\n\n\n<li><strong>Striped Rows:<\/strong> Shades every other row.<\/li>\n\n\n\n<li><strong>Shade the Row Pointed At:<\/strong> Shades the row under the pointer, to follow it across.<\/li>\n\n\n\n<li><strong>Tick Means and Cross Means:<\/strong> What screen readers read out for a tick and a cross. Defaults: <em>Included<\/em> and <em>Not included<\/em>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-3.webp\" alt=\"Comparison Table Layout tab\" class=\"wp-image-4876\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-3.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-3-600x375.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-3-300x188.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-3-1024x640.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-3-768x480.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Label Column Width:<\/strong> The width of the first column. Empty: 30%, and 50% on phones. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Smallest Column Width:<\/strong> How narrow a column may get when the table scrolls sideways. Empty: 150px.<\/li>\n\n\n\n<li><strong>Space Inside Cells:<\/strong> The padding of every cell. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Values Line Up:<\/strong> Center or Left.<\/li>\n\n\n\n<li><strong>Keep the Head in View:<\/strong> The column names stay at the top of the screen while a long table scrolls by. <strong>Space Above<\/strong> leaves room for a fixed site header.<\/li>\n\n\n\n<li><strong>On Phones:<\/strong> <em>One Column at a Time, With a Switch<\/em> shows one plan with a switch above the table to pick another. <em>Scroll Sideways, Labels Held<\/em> keeps every column and lets the table scroll, with the labels staying in place.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-4.webp\" alt=\"Comparison Table Style tab\" class=\"wp-image-4877\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-4.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-4-600x375.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-4-300x188.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-4-1024x640.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-comparison-table-4-768x480.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Table:<\/strong> Accent colour (ticks, the highlight frame and the badge use it), the highlighted column\u2019s background, the table background, the lines between rows, an outer border, rounded corners and a shadow.<\/li>\n\n\n\n<li><strong>Column Heads:<\/strong> Background, name colour and typography, subtitle colour, price colour and typography, badge colours.<\/li>\n\n\n\n<li><strong>Rows:<\/strong> Label and value colours and typography, tick colour, cross and dash colour, tick size, group heading colours, stripe and hover colours.<\/li>\n\n\n\n<li><strong>Buttons:<\/strong> Colours at rest and on hover, separate colours for the highlighted column, border, corner radius, padding and typography.<\/li>\n\n\n\n<li><strong>Phone Switch:<\/strong> The colours of the switch shown above the table on phones.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab provides spacing, background and position controls for the whole block, plus the ShapeBlock Pro extensions (Responsive, Display Conditions and Motion Effects).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tips<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keep labels short and put the detail in a tooltip.<\/li>\n\n\n\n<li>Highlight only one column. Two highlighted columns cancel each other out.<\/li>\n\n\n\n<li>For long tables, turn on Keep the Head in View so visitors always know which column is which.<\/li>\n\n\n\n<li>Use Scroll Sideways on phones for specification tables where every column matters; use the switch for plans, where people pick one.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Comparison Table Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/comparison-table\/\">Comparison Table demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Comparison Table Block puts plans or products side by side in a real table. Each column is a plan or a product with its name, price and button; each row is a feature with a tick, a cross, a dash or a short text in every column. One column can be highlighted as the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16,30],"doc_tag":[],"class_list":["post-4878","docs","type-docs","status-publish","hentry","doc_category-content-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":831,"total_views":"5","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4878"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4878\/revisions"}],"predecessor-version":[{"id":5492,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4878\/revisions\/5492"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4878"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4878"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}