2. From the Table Header<\/strong> tab, add the header of your table. Once you open the tab, the first item you\u2019ll see is a row<\/strong>. It is the row of the header.<\/p>\n\n\n\nNote: To add a row in the table header or body, you have to initiate a row first.<\/em> <\/p>\n\n\n\nOpen the item, and select Start New Row <\/strong>from the Action<\/strong> dropdown.<\/p>\n\n\n\n3. To edit the header cell content, open the first cell: ID<\/strong> item. You\u2019ll see the Action<\/strong> dropdown is set to Cell Content<\/strong> because it is a content cell.<\/p>\n\n\n\nThen in the Content<\/strong> tab, you can add text content in the Text field. <\/p>\n\n\n\nTo add a tooltip to the content, enable the Tooltip<\/strong> toggle. You can add the tooltip on an icon or the entire cell. In the Tooltip Content<\/strong> field, you can add the tooltip text.<\/p>\n\n\n\nFrom the Icon\/Image<\/strong> tab, you can add an image or icon to the table content.<\/p>\n\n\n\nFinally, from the Advanced<\/strong> tab, you can manage the Column Span (colspan), Row Span (rowspan), column width, individual cell colour and background colour.<\/p>\n\n\n\n\nNote: The column width set here will apply to all the cells of that particular column.<\/em><\/p>\n<\/blockquote>\n\n\n\n<\/p>\n\n\n\nYou can follow the same process to edit the other table header cells.<\/p>\n\n\n\n
Click the + Add Item<\/strong> button to add more cells to the table header.<\/p>\n\n\n\n\nNote: You can add a row as well but ideally, a table header should have only one row.<\/em><\/p>\n<\/blockquote>\n\n\n\n<\/p>\n\n\n\n
4. Go to the Table Body<\/strong> tab to add or edit the table body content.<\/p>\n\n\n\nSimilar to the Table Header,<\/strong> it will have a row first. Make sure the Action<\/strong> dropdown is set to Start New Row<\/strong>.<\/p>\n\n\n\n5. Open the first item, and make sure the Action<\/strong> dropdown is set to Cell Content<\/strong>. <\/p>\n\n\n\nFrom the Content<\/strong> tab, you can add the content for the cell in the Text<\/strong> field.<\/p>\n\n\n\nThen you\u2019ll find a Tooltip<\/strong> toggle. You can turn it on to add a tooltip to the cell or on an icon. In the Tooltip Content<\/strong> field, you can add the tooltip text.<\/p>\n\n\n\nFrom the Icon\/Image<\/strong> tab, you can add an image or icon to the table content.<\/p>\n\n\n\nThen from the Advanced<\/strong> tab, you can manage the content alignment, Column Span (colspan), Row Span (rowspan).<\/p>\n\n\n\nWe\u2019ll highlight the first column of the comparison table to make it stand out. To do that, select Yes<\/strong> from the Mark this cell as a Table Heading?<\/strong> dropdown.<\/p>\n\n\n\nYou can follow the same process to edit other cells in the row. But make sure to select No<\/strong> from the Mark this cell as a Table Heading?<\/strong> dropdown.<\/p>\n\n\n\nThis will make the first column focused.<\/p>\n\n\n\n
You can repeat steps 4 and 5 to create the entire comparison table. <\/p>\n\n\n\n
Click the + Add Item<\/strong> button to add more rows and cells in the table body.<\/p>\n\n\n\n\nNote: To add a row in the table header or body, you have to initiate a row first.<\/em><\/p>\n<\/blockquote>\n\n\n\n<\/p>\n\n\n\n
\nNote: Make sure the number of columns in the table header and body are the same.<\/em><\/p>\n<\/blockquote>\n\n\n\n<\/p>\n\n\n\nThis is how easy it is to create a comparison table in Elementor. <\/p>\n\n\n\n
Also, check How to make Data Tables Responsive in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":105036,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,552],"class_list":["post-105034","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-table"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=105034"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105034\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105036"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105034"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"table](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/table-content.png\")
<\/figure>\n\n\n\n![\"table](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/table-header-stracture.png\")
<\/figure>\n\n\n\n![\"table](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/table-header-row.gif\")
<\/figure>\n\n\n\n![\"table](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/table-header-content.gif\")
<\/figure>\n\n\n\n![\"table](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/table-body-stracture-533x1024.png\")
<\/figure>\n\n\n\n![\"table](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/table-body-content.gif\")
<\/figure>\n\n\n\n![\"comparison](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/comparison-table-demo.png\")
<\/figure>\n\n\n\n