How to Add a Data Table to Your WordPress Website

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.

Tables, however, can be difficult to create and populate with information, and creating tables in WordPress can be a tiresome task. To make it easier for everyone to create awesome tables, we’ve added a data table addon to our Qi Addons for Elementor plugin. The plugin contains over a hundred widgets that expand Elementor’s capabilities and save your time.

You can use the Gutenberg editor, too, and add data tables anywhere on your website. Our Qi Blocks for Gutenberg plugin 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.

In this article, we’ll show you how to create a beautiful table for your website using Elementor and Gutenberg with some help from our plugins.

Adding a Data Table Using Qi Addons for Elementor

To get started creating the data table from our widget page, you first need to make sure you have the Qi Addons for Elementor plugin installed and activated. The same goes for Elementor. To install the plugins, simply navigate to Plugins > Add New from your website’s back end, search for the plugins, and then install and activate them. Note that you’ll need the premium version of Qi Addons for Elementor to be able to use the Data Tables plugin. You can also follow the whole tutorial in this video.

Once done, you can open up a new page or post. The first step we’ve performed, before even adding the widget, is to prepare the work field by setting up the background image and some text.

To set the image, we’ve used the Edit Section options. Under Style, we’ve chosen the Classic background type and added the image. We then chose Center Center for Position, Fixed for Attachment, No-repeat for Repeat, and Cover for Size.

From there, it’s only a matter of adding a column to the section we just added the image background to and adding some text to it – it’s routine Elementor stuff. When you’re 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.

With the Data Table added, we can move on to setting the contents of the table. Don’t worry if it looks out of proportion now – we’ll set that right in a flash.

Setting the Content

When you look at the options under Content > General, 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. Here, we set the number of rows per page to six and decided against adding the row counter.

Next are the headings options. In the first row in the table are the headings. By changing their number – adding more Items under Headings, you change the number of columns, and you can also change their width. We added another column and set the column width to 20 for all of them. You can also add the text of the heading under the Column Title field.

The rest of this page of the table is populated by adding items under the Items section. These are organized from left to right and from top to bottom, meaning the first five items we have in our Items sections are the table cells with the photos. Every item will let you choose the type of content you want to have in it – image or text, related options, and a link for the item.

For the first five, we went with Image as item types and Original for image size – 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.

The remaining items are text cells, so we left the text as the content type. 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. We applied the same process of adding text and the hash sign to every item.

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. That’s what we did – the headings remained the same, and a pagination counter showed up, too.

With that, we were free to move on to styling the table – something we’re able to do in the Style tab.

Styling the Table

The styling options available in the widgets are separated into four sections – the general Style, Main Title Style, Cell Style, and Pagination Style. We’ll start at the top.

The general Style options include things like alignment, setting the background, borders, and cell padding. The first option we chose was setting Table Alignment to Center. Following that, we opted to add a background to the table. Instead of choosing an image for it – which was an option – we decided to go with the white color for the background. We didn’t choose a different color for the headings row or the first column, to have the background uniform for the whole table.

As for the border option, we didn’t want to add too much to it, although you should feel free to switch colors, sizes, and border types – whatever the options allow you to do. We set the border style to Solid, the width to 1 pixel, and the color to a slightly darker shade of gray. We also switched the heading cells padding to 29 for top and bottom, and cell padding to 17 for top and bottom.

With that, we were ready to move on to styling the main title row, or the headings, as well as the cell styling options.

The style options for the headings are straightforward. You get to choose the title tag, the title color, and the title typography settings. We chose black for the title color and edited a few things in the typography settings. We’ve set the font size to 17, and the weight to 500. We’ve already used uppercase for the text in the heading, but if we haven’t, we’d set it here under Transform.

We decided we didn’t want to change the style, decoration, or line-height, letter spacing, or word spacing values.

Under the Cell Style options, you’ll 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. We gave the cell text a solid black color and set its weight at 500. We also set the text link underline to None.

The final set of styling options we have left at this point are those under Pagination Style.

There are quite a few options in Pagination Style. You’ll have separate options for styling the numbers and the arrows, as well as the options for items’ heights, widths, and the distances between them. So while we didn’t change the alignment of the pagination, we did go into pagination typography to set the size at 16px, and weight at 500.

Pagination also has options for elements that are inactive – normal – and the ones that are either active or being hovered over. We gave the normal items a gray color using the hex code #c4c4c4 and chose white for the background color. Under Active, we changed the color of the items to solid black.

Next are the pagination arrow options, where you can choose from a library of icons, or upload your own SVG file. That’s what we did, and we changed our pagination arrows. We also set the arrow size to 23px.

The final set of options lets you change the shape of pagination items, their width, height, space between them, and top margin. We didn’t change the border-radius to keep the square look of the items, but we did change the width to 39px, height to 29px, space between to 7px, and top margin to 17px. And with that, our table was done.

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.

Adding the Data Table Using Qi Blocks for Gutenberg

If you need to create a table using the Gutenberg editor, it’s the Data Table block you want. It’s one of the premium blocks, so you’ll need the plugin’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’s page.

Setting the Block’s Content

Once you add the block, you’ll notice that it has one row per page, not counting the headings row, four columns, and two pages by default. The first thing we need to do is make sure we have enough rows and columns.

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. We didn’t want the row counter, but we needed more rows, so we set their number to three. Again, the headings row doesn’t count.

To add new columns and fields to the table, you need to click on the “+” button in the block menu. You’ll get to add a heading, text, and image item. Adding a heading will add a column, and adding text and image items will add different fields.

We added a new column by adding a heading. 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.

The next stage is adding the contents for each item individually. Double-clicking on an item will bring up additional options in the Settings Sidebar and the menu that appears when you select an item. 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.

We used the column width setting to change the size of the columns in our table. From left to right, the sizes we added were 12.7, 17.55, 27.05, 27.05, and 15.65. We also changed the contents of the fields in the headings row. Finally, we added all the photos and text to the rest of the items.

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 – it’s entirely up to you.

Styling the Block

After navigating to Style > General in the Setting Sidebar, you’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.

For the background, you can choose the classic or gradient background. When you make the choice, you’ll get access to options specific for that type of background, 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.

Because we chose to go with the classic background and didn’t want to use an image, we set the background color to #ffffff. Next, we picked a solid border type, set its width to 1, and color to #dbdbdb. Finally, we added 29px padding to both the top and bottom of the heading cells. For the remaining cells, the padding values we added were, left to right, 36px, 30px, 36px, and 30px.

The next block of style options is under Style > Main Title. You can set tag, color, and typography options for the title. Under the typography options, we changed the font size to 17px and font weight to a medium 500 before moving on to Style > Cell.

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. 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.

The final set of style options is under Style > Pagination. You can change the pagination alignment and typography options, for starters. 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. Pagination item height, width, and the space between are also among the options, as is setting the top margin.

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. 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.

And that was it – our table was done. Of course, yours can look different, and we encourage you to experiment and create one that perfectly matches your website’s style.

Let’s Wrap It Up!

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!