{"id":42144,"date":"2023-01-14T15:00:12","date_gmt":"2023-01-14T14:00:12","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=42144"},"modified":"2023-01-11T23:29:18","modified_gmt":"2023-01-11T22:29:18","slug":"how-to-add-data-table-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-data-table-wordpress\/","title":{"rendered":"How to Add a Data Table to Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Nestled somewhere between lists and infographics as a method of presenting information, data tables are incredibly useful when you want to share a lot of information in a simple, navigable, and visually uncluttered way. With tables, you can make sure that whoever is reading it will be able to find whatever they are looking for without too much effort.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Tables, however, can be difficult to create and populate with information, and <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-tables-in-wordpress\/\">creating tables in WordPress<\/a> can be a tiresome task. To make it easier for everyone to create awesome tables, we\u2019ve added a <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/data-table\/\" target=\"_blank\" rel=\"noopener\">data table addon<\/a> to our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin. The plugin contains over a hundred widgets that expand Elementor\u2019s capabilities and save your time.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use the Gutenberg editor, too, and add data tables anywhere on your website. Our <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg plugin<\/a> will help you with it. With 48 free blocks and 33 premium ones, the plugin offers many new ways to create exciting elements for your website. The plugin will give you many options for building the perfect page or site, from tabs to carousels and galleries to search blocks, and it has an option for data tables, too.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll show you how to create a beautiful table for your website using Elementor and Gutenberg with some help from our plugins.<br \/>\n[\/vc_column_text][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\">Adding a Data Table Using Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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=\"538\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To get started creating the data table from our widget page, you first need to make sure you have the <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin installed and activated. The same goes for <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a>. To install the plugins, simply navigate to <em>Plugins &gt; Add New<\/em> from your website\u2019s back end, search for the plugins, and then install and activate them. <strong>Note that you\u2019ll need the premium version of Qi Addons for Elementor to be able to use the Data Tables plugin<\/strong>. You can also follow the whole tutorial in this video.[\/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\/sWp6KDr_NcM\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once done, you can open up a new page or post. The first step we\u2019ve performed, before even adding the widget, is to prepare the work field by setting up the background image and some 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=\"481\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Setup.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Setup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Setup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Setup-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Setup-768x381.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Setup-620x308.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To set the image, we\u2019ve used the Edit Section options. Under <em>Style<\/em>, we\u2019ve chosen the Classic background type and added the image. <strong>We then chose Center Center for <em>Position<\/em>, Fixed for <em>Attachment<\/em>, No-repeat for <em>Repeat<\/em>, and Cover for <em>Size<\/em>.<\/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=\"648\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Background-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Background Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Background-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Background-Settings-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Background-Settings-768x514.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Background-Settings-620x415.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From there, it\u2019s only a matter of adding a column to the section we just added the image background to and adding some text to it \u2013 it\u2019s routine Elementor stuff. When you\u2019re ready, you can search for the Data Table widget in the left-hand side menu, and then simply drag it under your text to add it to the section.<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=\"451\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Add-Data-Table-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Add Data Table Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Add-Data-Table-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Add-Data-Table-Widget-300x140.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Add-Data-Table-Widget-768x357.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Add-Data-Table-Widget-620x289.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the Data Table added, we can move on to setting the contents of the table. Don\u2019t worry if it looks out of proportion now \u2013 we\u2019ll set that right in a flash.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting the Content<\/h3>\n<p>[\/vc_column_text][vc_column_text]When you look at the options under <em>Content &gt; General<\/em>, the first couple of options you see determine how many rows you want visible per page, as well as whether you want to enable the row counter field, and how wide you want it to be if you enable it. <strong>Here, we set the number of rows per page to six and decided against adding the row counter.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next are the headings options. In the first row in the table are the headings. By changing their number \u2013 adding more <em>Items<\/em> under Headings, you change the number of columns, and you can also change their width. <strong>We added another column and set the column width to 20 for all of them.<\/strong> You can also add the text of the heading under the <em>Column Title<\/em> field.[\/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=\"544\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Headings-Item.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Headings Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Headings-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Headings-Item-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Headings-Item-768x431.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Headings-Item-620x348.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The rest of this page of the table is populated by adding items under the <em>Items<\/em> section. These are organized from left to right and from top to bottom, meaning the first five items we have in our <em>Items<\/em> sections are the table cells with the photos. Every item will let you choose the type of content you want to have in it \u2013 image or text, related options, and a link for the item.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the first five, <strong>we went with Image as item types and Original for image size \u2013 our images were of a good size for this purpose. We also added a hash sign to the link field to make it appear clickable.<\/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=\"620\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Image.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Item Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Image-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Image-768x491.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Image-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The remaining items are text cells, so we left the text as the content type. <strong>We added our text as well as the hash sign in the item link field and added twenty-two more items to fill out the table.<\/strong> We applied the same process of adding text and the hash sign to every item.[\/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=\"636\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Text.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Item Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Text-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Text-768x504.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Item-Text-620x407.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Because we have set the number of rows per page to six, any more items that we add as cells to the table would automatically be transferred to the next page. <strong>That\u2019s what we did<\/strong> \u2013 the headings remained the same, and a pagination counter showed up, too.[\/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=\"587\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Two-Pages.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Two Pages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Two-Pages.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Two-Pages-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Two-Pages-768x465.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Two-Pages-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that, we were free to move on to styling the table \u2013 something we\u2019re able to do in the <em>Style<\/em> tab.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Table<\/h3>\n<p>[\/vc_column_text][vc_column_text]The styling options available in the widgets are separated into four sections \u2013 the general Style, Main Title Style, Cell Style, and Pagination Style. We\u2019ll start at the top.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The general Style options include things like alignment, setting the background, borders, and cell padding. The first option we chose was<strong> setting <em>Table Alignment<\/em> to Center.<\/strong> Following that, we opted to add a background to the table. Instead of choosing an image for it \u2013 which was an option \u2013 <strong>we decided to go with the white color for the background<\/strong>. We didn\u2019t choose a different color for the headings row or the first column, to have the background uniform for the whole table.[\/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=\"640\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Style-Options.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Style Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Style-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Style-Options-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Style-Options-768x507.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Style-Options-620x409.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the border option, we didn\u2019t want to add too much to it, although you should feel free to switch colors, sizes, and border types \u2013 whatever the options allow you to do. <strong>We set the border style to <em>Solid<\/em>, the width to 1 pixel, and the color to a slightly darker shade of gray.<\/strong> We also switched the heading cells padding to 29 for top and bottom, and cell padding to 17 for top and bottom.[\/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=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Border.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Border-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Border-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Border-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that, we were ready to move on to styling the main title row, or the headings, as well as the cell styling options.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The style options for the headings are straightforward. You get to choose the title tag, the title color, and the title typography settings. <strong>We chose black for the title color and edited a few things in the typography settings. We\u2019ve set the font size to 17, and the weight to 500.<\/strong> We\u2019ve already used uppercase for the text in the heading, but if we haven\u2019t, we\u2019d set it here under <em>Transform<\/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=\"596\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Title-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Title Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Title-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Title-Typography-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Title-Typography-768x472.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Title-Typography-620x381.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We decided we didn\u2019t want to change the style, decoration, or line-height, letter spacing, or word spacing values.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under the <em>Cell Style<\/em> options, you\u2019ll be able to set the color and typography options for the cell text and the linked text, as well as an option for link underline. <strong>We gave the cell text a solid black color and set its weight at 500.<\/strong> We also set the text link underline to <em>None<\/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=\"536\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Cell-Style.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Cell Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Cell-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Cell-Style-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Cell-Style-768x425.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Cell-Style-620x343.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final set of styling options we have left at this point are those under <em>Pagination Style<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are quite a few options in <em>Pagination Style<\/em>. You\u2019ll have separate options for styling the numbers and the arrows, as well as the options for items&#8217; heights, widths, and the distances between them. <strong>So while we didn\u2019t change the alignment of the pagination, we did go into pagination typography to set the size at 16px, and weight at 500.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Pagination also has options for elements that are inactive \u2013 normal \u2013 and the ones that are either active or being hovered over. <strong>We gave the normal items a gray color using the hex code #c4c4c4 and chose white for the background color.<\/strong> Under <em>Active<\/em>, <strong>we changed the color of the items to solid black.<\/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=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Pagination-Style.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Pagination Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Pagination-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Pagination-Style-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Pagination-Style-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Pagination-Style-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next are the pagination arrow options, where you can choose from a library of icons, or upload your own SVG file. <strong>That\u2019s what we did, and we changed our pagination arrows. We also set the arrow size to 23px.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The final set of options lets you change the shape of pagination items, their width, height, space between them, and top margin. We didn\u2019t change the border-radius to keep the square look of the items, <strong>but we did change the width to 39px, height to 29px, space between to 7px, and top margin to 17px<\/strong>. And with that, our table was done.[\/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=\"595\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-Final-Look.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Elementor Final Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-Final-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-Final-Look-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-Final-Look-768x472.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Elementor-Final-Look-620x381.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you are free to play around with the options and the values to create a table that fits your website and its theme perfectly.<br \/>\n[\/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\">Adding the Data Table Using Qi Blocks for Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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=\"474\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you need to create a table using the Gutenberg editor, it&#8217;s the <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/data-table\/\" target=\"_blank\" rel=\"noopener\">Data Table block<\/a> you want. It&#8217;s one of the premium blocks, so you&#8217;ll need the plugin&#8217;s premium version to get it. Once you do, all it takes to get started is to open a page or post in the editor, add the block, and follow this tutorial to see how we created one of the samples we have on the block&#8217;s page.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting the Block&#8217;s Content<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you add the block, you&#8217;ll notice that it has one row per page, not counting the headings row, four columns, and two pages by default. <strong>The first thing we need to do is make sure we have enough rows and columns.<\/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=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Rows-and-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg Rows and Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Rows-and-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Rows-and-Columns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Rows-and-Columns-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Rows-and-Columns-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Content options you can see in the Setting Sidebar let you set the number of rows you want the table to have per page and switch the row counter on or off. <strong>We didn&#8217;t want the row counter, but we needed more rows, so we set their number to three. Again, the headings row doesn&#8217;t count.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add new columns and fields to the table, you need to click on the &#8220;+&#8221; button in the block menu. You&#8217;ll get to add a heading, text, and image item. <strong>Adding a heading will add a column, and adding text and image items will add different fields.<\/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\/2023\/01\/Data-Tables-Gutenberg-Adding-Headings-and-Items.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg Adding Headings and Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Tables-Gutenberg-Adding-Headings-and-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Tables-Gutenberg-Adding-Headings-and-Items-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Tables-Gutenberg-Adding-Headings-and-Items-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Tables-Gutenberg-Adding-Headings-and-Items-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>We added a new column by adding a heading.<\/strong> The final table has 40 items, so we needed to add quite a few. The first item, and every fifth item afterward, were image items. The rest were text items. New pages are created automatically, so we ended up with two pages of three rows and the final third page of two.[\/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=\"492\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Pages.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg Pages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Pages.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Pages-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Pages-768x390.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Pages-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next stage is adding the contents for each item individually.<strong> Double-clicking on an item will bring up additional options in the Settings Sidebar and the menu that appears when you select an item.<\/strong> Double-clicking on the columns lets you set the width of the whole column in the Content option and change the text in the field. Double-clicking text and image items lets you change their contents while allowing you to change the type of the item in the Settings Sidebar. That can come in handy if you make a mistake when adding items.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We used the column width setting to change the size of the columns in our table. <strong>From left to right, the sizes we added were 12.7, 17.55, 27.05, 27.05, and 15.65.<\/strong> We also changed the contents of the fields in the headings row. <strong>Finally, we added all the photos and text to the rest of the items.<\/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=\"469\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Column-Widths.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg Column Widths\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Column-Widths.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Column-Widths-300x145.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Column-Widths-768x372.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Column-Widths-620x300.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After setting up the content for all 40 items, we moved on to styling them. Of course, you can have fewer items or more of them \u2013 it&#8217;s entirely up to you.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Block<\/h3>\n<p>[\/vc_column_text][vc_column_text]After navigating to <em>Style &gt; General<\/em> in the Setting Sidebar, you&#8217;ll see the options for setting the table layout to fixed or automatic, choosing the table alignment, and setting the minimal width of the whole block.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the background, you can choose the classic or gradient background. <strong>When you make the choice, you&#8217;ll get access to options specific for that type of background<\/strong>, i.e., two colors and the gradient type if you choose the gradient background, or a single color or an image if you choose the classic. You can also select specific colors for the headings row and the first column, set the border style and type, and the cell padding.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Because we chose to go with the classic background and didn&#8217;t want to use an image, <strong>we set the background color to #ffffff. Next, we picked a solid border type, set its width to 1, and color to #dbdbdb<\/strong>. Finally, we added 29px padding to both the top and bottom of the heading cells. <strong>For the remaining cells, the padding values we added were, left to right, 36px, 30px, 36px, and 30px.<\/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=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Style-Options.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg Style Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Style-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Style-Options-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Style-Options-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Style-Options-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next block of style options is under <em>Style &gt; Main Title<\/em>. You can set tag, color, and typography options for the title. Under the typography options, <strong>we changed the font size to 17px and font weight to a medium 500<\/strong> before moving on to <em>Style &gt; Cell<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With the Cell style options, you can set the color and typography options for the regular cell text and the cell text you use for links. You can also choose the underline option for the text link.<strong> The only change we made here was to set the cell text font size to 17px and the weight to 500 under the cell text typography options.<\/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=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Cell-Style.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg Cell Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Cell-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Cell-Style-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Cell-Style-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Cell-Style-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final set of style options is under <em>Style &gt; Pagination<\/em>. You can change the pagination alignment and typography options, for starters. <strong>You have access to color options both in normal view and on hover, too. You can add your image for the pagination arrows and choose their size.<\/strong> Pagination item height, width, and the space between are also among the options, as is setting the top margin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We changed the pagination font size to 16px and the weight to 500. Next, we set the normal color to #c4c4c4 and the hover color to #1e1e1e.<\/strong> We added our SVG arrows and set their size to 23px. Finally, we set the space between the items to 15px and the top margin to 16px.[\/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=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Final-Look.jpg\" class=\"attachment-full size-full\" alt=\"Data Table Gutenberg Final Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Final-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Final-Look-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Final-Look-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Data-Table-Gutenberg-Final-Look-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that was it \u2013 our table was done. Of course, yours can look different, and we encourage you to experiment and create one that perfectly matches your website&#8217;s style.<br \/>\n[\/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\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Data tables are indispensable for websites of all kinds, from stores to small business websites, educational websites, blogs, and anything in between. Thanks to Qi Addons for Elementor and Qi Blocks for Gutenberg, creating data tables for your WordPress website has become easier than ever!<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need an easy way to add data tables in WordPress? Our Qi Addons for Elementor plugin has everything you need to build awesome data tables!<\/p>\n","protected":false},"author":9295,"featured_media":42184,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[108,342],"class_list":["post-42144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons","tag-qi-blocks"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42144","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\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=42144"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42144\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/42184"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=42144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=42144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=42144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}