Versus Comparison Table
A modern and minimal Versus-style comparison table for showcasing two items, products, or ideas side by side. Includes a central “VS” badge, clean borders, and icons to highlight differences clearly. Perfect for comparing features, plans, tools, or concepts in a professional layout.
out 5, 2025
Criado
out 5, 2025
Atualizado
0
Tempos usados
Automation |
VS |
AI |
|---|---|---|
Workflows that run automatically |
Machines that can “think” |
|
|
|
Código do padrão
<!-- wp:tableberg/table {"version":"0.6.3","rows":4,"cols":3,"cells":9,"fixedColWidth":false,"colStyles":{"0":{"border":{"color":"#5344f4","width":"2px"},"borderRadius":{"topLeft":"8px","topRight":"8px","bottomRight":"8px","bottomLeft":"8px"}},"1":{"border":{"width":"0px","style":"none"}},"2":{"borderRadius":{"topLeft":"8px","topRight":"8px","bottomRight":"8px","bottomLeft":"8px"},"border":{"color":"#5344f4","width":"2px"}},"NaN":{}},"cellPadding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"enableTableHeader":"converted","headerBackgroundColor":"#ffffff","evenRowBackgroundColor":"#ffffff","oddRowBackgroundColor":"#ffffff","responsive":{"last":"stack","breakpoints":{"mobile":{"enabled":true,"headerAsCol":false,"maxWidth":700,"mode":"stack","direction":"col","stackCount":1}}},"innerBorderType":"col"} -->
<table class="wp-block-tableberg-table"><!-- wp:tableberg/cell {"tagName":"th","responsiveTarget":"#tableberg-450f989a-1607-4c89-bee1-3dd8e3de53ab-0"} -->
<th class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Automation</p>
<!-- /wp:paragraph --></th>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"tagName":"th","rowspan":4,"col":1,"responsiveTarget":"#tableberg-450f989a-1607-4c89-bee1-3dd8e3de53ab-3"} -->
<th class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"border":{"radius":"100px"},"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}}},"backgroundColor":"primary","textColor":"base","fontSize":"medium"} -->
<p class="has-text-align-center has-base-color has-primary-background-color has-text-color has-background has-link-color has-medium-font-size" style="border-radius:100px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">VS</p>
<!-- /wp:paragraph --></th>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"tagName":"th","col":2,"responsiveTarget":"#tableberg-450f989a-1607-4c89-bee1-3dd8e3de53ab-6"} -->
<th class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">AI</p>
<!-- /wp:paragraph --></th>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":1,"responsiveTarget":"#tableberg-450f989a-1607-4c89-bee1-3dd8e3de53ab-1"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Workflows that run automatically</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":1,"col":2,"responsiveTarget":"#tableberg-450f989a-1607-4c89-bee1-3dd8e3de53ab-7"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Machines that can "think"</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":2} -->
<td class="wp-block-tableberg-cell"><!-- wp:tableberg/icon {"icon":{"iconName":"moveTo","type":"wordpress","icon":{"type":{"displayName":"SVG"},"key":null,"ref":null,"props":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","children":{"key":null,"ref":null,"props":{"d":"M19.75 9c0-1.257-.565-2.197-1.39-2.858-.797-.64-1.827-1.017-2.815-1.247-1.802-.42-3.703-.403-4.383-.396L11 4.5V6l.177-.001c.696-.006 2.416-.02 4.028.356.887.207 1.67.518 2.216.957.52.416.829.945.829 1.688 0 .592-.167.966-.407 1.23-.255.281-.656.508-1.236.674-1.19.34-2.82.346-4.607.346h-.077c-1.692 0-3.527 0-4.942.404-.732.209-1.424.545-1.935 1.108-.526.579-.796 1.33-.796 2.238 0 1.257.565 2.197 1.39 2.858.797.64 1.827 1.017 2.815 1.247 1.802.42 3.703.403 4.383.396L13 19.5h.714V22L18 18.5 13.714 15v3H13l-.177.001c-.696.006-2.416.02-4.028-.356-.887-.207-1.67-.518-2.216-.957-.52-.416-.829-.945-.829-1.688 0-.592.167-.966.407-1.23.255-.281.656-.508 1.237-.674 1.189-.34 2.819-.346 4.606-.346h.077c1.692 0 3.527 0 4.941-.404.732-.209 1.425-.545 1.936-1.108.526-.579.796-1.33.796-2.238z"},"_owner":null}},"_owner":null}},"color":"#5344f4","borderRadius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"}} /--></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":2,"col":2} -->
<td class="wp-block-tableberg-cell"><!-- wp:tableberg/icon {"icon":{"iconName":"sparkles","type":"wordpress","icon":{"type":{"displayName":"SVG"},"key":null,"ref":null,"props":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","children":{"key":null,"ref":null,"props":{"d":"M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"},"_owner":null}},"_owner":null}},"color":"#5344f4"} /--></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":3,"responsiveTarget":"#tableberg-450f989a-1607-4c89-bee1-3dd8e3de53ab-2"} -->
<td class="wp-block-tableberg-cell"><!-- wp:tableberg/styled-list {"iconSize":"16px"} -->
<ul class="wp-block-tableberg-styled-list"><!-- wp:tableberg/styled-list-item {"text":"Good for replacing repetitive or mundane tasks"} -->
<div></div>
<!-- /wp:tableberg/styled-list-item -->
<!-- wp:tableberg/styled-list-item {"text":"Relies on a predetermined set of rules: when this happens, then do this"} -->
<div></div>
<!-- /wp:tableberg/styled-list-item --></ul>
<!-- /wp:tableberg/styled-list --></td>
<!-- /wp:tableberg/cell -->
<!-- wp:tableberg/cell {"row":3,"col":2,"responsiveTarget":"#tableberg-450f989a-1607-4c89-bee1-3dd8e3de53ab-8"} -->
<td class="wp-block-tableberg-cell"><!-- wp:tableberg/styled-list {"iconSize":"16px"} -->
<ul class="wp-block-tableberg-styled-list"><!-- wp:tableberg/styled-list-item {"text":"Able to analyze massive datasets, learn from that data, and then make decisions based on it"} -->
<div></div>
<!-- /wp:tableberg/styled-list-item -->
<!-- wp:tableberg/styled-list-item {"text":"Quality of output is dependent on effective human prompting and accurate data"} -->
<div></div>
<!-- /wp:tableberg/styled-list-item --></ul>
<!-- /wp:tableberg/styled-list --></td>
<!-- /wp:tableberg/cell --></table>
<!-- /wp:tableberg/table -->Instruções de uso
Copy and paste this pattern into your WordPress block editor. Replace the titles, icons, and text with your own to compare any two options — such as pricing plans, tools, or services. You can also customize colors, icons, and the “VS” label to match your site’s design.
