{"id":40606,"date":"2022-09-29T15:00:01","date_gmt":"2022-09-29T13:00:01","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=40606"},"modified":"2022-09-28T15:22:15","modified_gmt":"2022-09-28T13:22:15","slug":"how-to-add-comparative-table-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-comparative-table-to-wordpress\/","title":{"rendered":"How to Add a Comparative Table to Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Have you ever shopped around for something and found it <strong>hard to compare<\/strong> the various benefits and drawbacks of your choices? You may be trying to compare anything, from pairs of shoes through complex software solutions, all the way to motor vehicles and real estate. <strong>Collating and comparing a lot of data can be difficult<\/strong> to do in one\u2019s head, and time-consuming to do it on one\u2019s own. Oftentimes, web designers and online store operators solve this issue using a <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-table-plugins\/\">table plugin<\/a> or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-pricing-table-plugins\/\">pricing table<\/a>, where applicable. But sometimes there is a lot to consider, and you need an engaging way to present all the relevant data. This is where <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons<\/a> and its <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/comparative-table\/\" target=\"_blank\" rel=\"noopener\">comparative table widget<\/a> come in. And you can have it all set up within minutes. To wit, the video below:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/9AW6Ku0TTTg\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, you may prefer your tutorials in text form. Never fear, we have you covered. But we would also like to take some time to talk to you about some use cases for a comparative table, as well as Qi Addons and Elementor.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s how we\u2019ve broken it up:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-comparative-table\">What Is a Comparative Table<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-qi-addons-for-elementor\">What Are Qi Addons for Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-comparative-table-widget-to-your-website-using-qi-addons\">How to Add a Comparative Table Widget to Your Website Using Qi Addons<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#populating-your-comparative-table-widget\">Populating Your Comparative Table Widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-your-comparative-table-fields\">Styling Your Comparative Table Fields<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-your-comparative-table-text-and-symbols\">Styling Your Comparative Table Text And Symbols<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-your-comparative-table-buttons\">Styling Your Comparative Table Buttons<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-comparative-table\"><\/a>What Is a Comparative Table<\/h2>\n<p>[\/vc_column_text][vc_column_text]A comparative table is a table which lets the reader compare\u2026 data.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Well, that\u2019s a useless sentence if there ever was one, isn\u2019t it?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To be somewhat clearer, a comparative table is <strong>a kind of a comparison chart:<\/strong> a data visualization tool which grants its reader an overview of how different elements belonging to different data sets might relate to each other.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Still not clear?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s consider an example. Suppose you are considering a rugged, manly holiday in the mountains, and two or more cottages fit the bill. You want to consider the upsides and downsides of each before committing. How far is the nearest shop? Does the cottage have a water heater, or do you have to make do with cold showers? How about the number of rooms or beds? Simplified, are there dealbreakers or dealmakers?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is exactly where a comparative table setting out each cottage\u2019s features would come in very handy. And that\u2019s exactly what we will be talking to you about.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"426\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Comparative-Table.jpg\" class=\"attachment-full size-full\" alt=\"Comparative Table\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Comparative-Table.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Comparative-Table-300x132.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Comparative-Table-768x338.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Comparative-Table-620x273.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-qi-addons-for-elementor\"><\/a>What Are Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> is a plugin developed by an award-winning team of professional WordPress designers in order to expand Elementor\u2019s already impressive capabilities. And we are proud to call it our own.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All you need to do to <strong>use Qi Addons<\/strong> is <strong>install the latest version of Elementor<\/strong> (the free version will do) and then install and activate the Qi Addons plugin as you would with any other plugin. The comparative table widget is <strong>only available with Qi Addons\u2019 premium version<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-comparative-table-widget-to-your-website-using-qi-addons\"><\/a>How to Add a Comparative Table Widget to Your Website Using Qi Addons<\/h2>\n<p>[\/vc_column_text][vc_column_text]We will be showing you how to add a comparative table to a post, but the process works exactly the same for a page. We have started off with a blank post and a title.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add a comparative table to a page, simply find it in the left hand side menu and drag it to where you want it on the page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Element.jpg\" class=\"attachment-full size-full\" alt=\"Drag Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Element.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Element-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Element-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Element-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The element will appear in its default state, with two columns and three rows with some placeholder text.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"454\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Look-300x141.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Look-768x360.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Default-Look-620x290.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"populating-your-comparative-table-widget\"><\/a>Populating Your Comparative Table Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]The <strong>Content<\/strong> tab and its <strong>General<\/strong> section should be opened by default. The <strong>Main Column Title<\/strong> field changes the title in the upper left hand side corner of the table. We will replace the generic title with <em>Auto monthly plans<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Headings<\/strong> and <strong>Columns<\/strong> parts of the tab contain the controls for the rows and columns, respectively. You can add them by clicking the <strong>+Add Item<\/strong> button under each heading. We will add two more rows. Clicking on an <strong>Item<\/strong> in the <strong>Headings<\/strong> section will expand it, and you will be able to enter whatever row title you like. We will do so with all our rows.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"606\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Item-Title.jpg\" class=\"attachment-full size-full\" alt=\"Item Title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Item-Title.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Item-Title-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Item-Title-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Item-Title-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Expanding a <strong>Columns<\/strong> item will reveal more options. The <strong>Column Title<\/strong> is the text in the top box of the column, the <strong>Rows Values<\/strong> are comma-separated values of \u2013 and +, depending on whether a feature is available or not, and the <strong>Column Link Text<\/strong> is the text at the bottom of the column, leading (notionally) to the purchase. The <strong>Column Link<\/strong> field immediately above is where you should enter the link.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Columns.jpg\" class=\"attachment-full size-full\" alt=\"Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Columns-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Columns-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Columns-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Button<\/strong> section of the tab has only one control: the <strong>Enable Button Text Underline<\/strong> toggle. We will switch it to <em>Yes<\/em>. You can use the <strong>Button Icon<\/strong> section to add an <em>.svg<\/em> icon to the <em>Purchase<\/em> button. We will not be using it in this design.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button.jpg\" class=\"attachment-full size-full\" alt=\"Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-your-comparative-table-fields\"><\/a>Styling Your Comparative Table Fields<\/h2>\n<p>[\/vc_column_text][vc_column_text]The default version of the tab is effective, but plain. Perhaps that\u2018s just what you want, but, then again, perhaps it isn\u2018t. The <strong>Style<\/strong> tab of the widget is where you can do that.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Style<\/strong> section of the <strong>Style<\/strong> tab has several basic controls. The first control is the <strong>Table Layout<\/strong> toggle, which lets you choose between the default <em>Auto<\/em> and <em>Fixed<\/em>, which equalizes the column width. The <strong>Minimal Width<\/strong> slider lets you control the minimum width for each column in order to improve legibility, but we only have three columns so we don\u2018t need it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Border Style<\/strong> control lets you switch the outer border on and off: the <em>All<\/em> setting means that all the borders are there, while the <em>Inside Only<\/em> setting leaves only the inside borders. The <strong>Border Type<\/strong> controls let you select a different type of border, such as <em>Double<\/em>, <em>Dashed<\/em>, <em>Grooved<\/em> and more. We will go with a <em>Solid<\/em> line, set its <strong>Width<\/strong> to 2 pixels, and its <strong>Color<\/strong> to a light pink (#<em>ffc9c9<\/em>).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Border.jpg\" class=\"attachment-full size-full\" alt=\"Style Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Border-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Border-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Border-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on down the <strong>Style<\/strong> section, you will find the <strong>Column Title Cell Padding<\/strong> and <strong>Cell Padding<\/strong> controls. They are used to set the space between the text of a cell and its borders. We will tweak ours to make the table look nicer, but you can choose whatever fits your website\u2018s style the best. The <strong>First Column Width<\/strong> slider sets the width for the first column. We will set ours to <em>41%<\/em> percent.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Style Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Columns-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Columns-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Columns-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final controls of this section are the <strong>Background Style<\/strong> and <strong>Background Color.<\/strong> You can select from a variety of options, but we will go with <em>Alternating<\/em>, meaning alternating colors for each row. We will also set our first color to a light grey (<em>#f9f9f9<\/em>), leaving the other color at the default value. This will make rows easier to make out.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Background-Style.jpg\" class=\"attachment-full size-full\" alt=\"Background Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Background-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Background-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Background-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Background-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-your-comparative-table-text-and-symbols\"><\/a>Styling Your Comparative Table Text And Symbols<\/h2>\n<p>[\/vc_column_text][vc_column_text]The <strong>Main Title Style<\/strong> section of the column controls the text in the first row \u2013 the titles of the columns. You can choose an HTML tag for it, but we will go with the default. You can also set the <strong>Main Title Color<\/strong> (we went with a light orange (<em>#e85656<\/em>), as well as the standard typography settings for the top row. We only changed the font size to <em>17<\/em>, but there is a host of options you can use to style your main title.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Main-Title-Style.jpg\" class=\"attachment-full size-full\" alt=\"Main Title Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Main-Title-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Main-Title-Style-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Main-Title-Style-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Main-Title-Style-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Row Title Style<\/strong> has exactly the same settings, only for the leftmost column. We will use the same settings as for the <strong>Main Title Style<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Row-Title-Style.jpg\" class=\"attachment-full size-full\" alt=\"Row Title Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Row-Title-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Row-Title-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Row-Title-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Row-Title-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Sign Style<\/strong> section lets you use an alternative icon for the checkmark and the X in the columns. You can select an icon from the upload library, or upload an <em>.svg<\/em> file. We will select some icons from our media library. We will also make them the same color as the text, and change their size to <em>14<\/em> and <em>13<\/em> pixels, respectively.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"660\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Sign-Style.jpg\" class=\"attachment-full size-full\" alt=\"Sign Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Sign-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Sign-Style-300x204.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Sign-Style-768x523.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Sign-Style-620x422.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-your-comparative-table-buttons\"><\/a>Styling Your Comparative Table Buttons<\/h2>\n<p>[\/vc_column_text][vc_column_text]Finally, we arrive at the buttons of the bottom row.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Button Style<\/strong> section has a <strong>Normal\/Hover<\/strong> toggle, letting you make different settings for the on-hover behavior of your button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <strong>Normal<\/strong> version of the button, we will change the font weight to <em>700<\/em> to make it stand out more, and select the <em>Uppercase<\/em> setting from the <strong>Transform<\/strong> menu for the same reason. We will also turn the text the same light orange color as the rest of the table. The <strong>Button Padding<\/strong> controls work just the same as the other controls. We will set them to 22 pixels.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, we find the <strong>Button Cell Background Color<\/strong> and the <strong>Button Cell Hover Background Color<\/strong> controls. These let you change the background on the normal and hover modes. We will change it in normal mode to the pink we already used for the border. We will not be selecting any special on-hover behaviors, but you are, of course, free to do as you please.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"979\" height=\"499\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Style.jpg\" class=\"attachment-full size-full\" alt=\"Button Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Style.jpg 979w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Style-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Style-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Style-970x494.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Style-620x316.jpg 620w\" sizes=\"auto, (max-width: 979px) 100vw, 979px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Button Icon Style<\/strong> options are used in the same way as the <strong>Button Style<\/strong> options, but since we didn\u2018t use an icon for this design, they are not necessary.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the <strong>Button Underline Style<\/strong> lets you control the behavior of the underline element of your button. It has, like the other button styling sections, a <strong>Normal\/Hover<\/strong> toggle.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will start with the <strong>Hover<\/strong> tab, and set the <strong>Underline Hover Width<\/strong> to <em>100%<\/em> in order for the underline to take up the entire width of the <em>PURCHASE<\/em> text. We will also set the <strong>Enable Hover Underline Draw<\/strong> to <em>Yes<\/em>, to enable the on-hover animation.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"475\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Style-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Button Underline Style Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Style-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Style-Hover-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Style-Hover-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Style-Hover-620x304.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Underline Offset<\/strong> and <strong>Underline Thickness<\/strong> controls apply to both the <strong>Normal<\/strong> and the <strong>Hover<\/strong> view. <strong>Offset<\/strong> offsets the line from the text (we will set it to <em>6px<\/em>), while <strong>Thickness<\/strong> dictates its thickness (we went with <em>2px<\/em>) The <strong>Underline Alignment<\/strong> can be set to anything you like, but it only matters if the underline is wider or narrower than the button text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"439\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Offset.jpg\" class=\"attachment-full size-full\" alt=\"Button Underline Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Offset-300x136.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Offset-768x348.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Button-Underline-Offset-620x281.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, with the premium version of the Qi Addons plugin, you can have a simple and effective \u2013 or complex and eye-catching \u2013 comparative table on your website within minutes. And with a virtually unlimited gamut of options, you can style it however you like with ease.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Do your users need to assess your various offers at a glance? With a Qi Addons comparative table widget, you can give them just that.<\/p>\n","protected":false},"author":16990,"featured_media":40642,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[108,310,37,36],"class_list":["post-40606","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons","tag-table","tag-ui","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=40606"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40606\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/40642"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=40606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=40606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=40606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}