BACK TO TOP

How to Create Tables in WordPress

How to Create Tables in WordPress

Adding tables to a website is an excellent way of organizing data and presenting it in a concise, logical, and comprehensive manner. Whether you wish to share information, statistics, or create comparisons of any kind, tabular format is your friend. It is well-ordered, clean, and as such it allows your users to read data at a glance.

In this tutorial, we will show you two ways of creating WordPress tables. One is the non-plugin way that works in Gutenberg only. The other method requires the installation of a plugin (we chose TablePress, currently the best table plugin on the market) and can be applied to both the Classic Editor and Elementor.

How to Create WordPress Tables in Gutenberg

Possibly the easiest way of adding basic tables to your WordPress website is by using Gutenberg. No coding is required nor do you have to install third-party plugins – the functionality comes already bundled with the editor.

The first thing you should do is open the page or post where you wish to display the table and add the Table block.

Table Block

By default, the table has 2 columns and 2 rows.

Table Custom Values

You can change these values as per your requirements and then click the Create button to make the table.

Table Custom Values

Once the table is created, you will have the possibility to customize it to some extent.

The first option placed above the block regards the block itself and it allows you to change the block style. You can choose between default and striped.

Block Style

The second option lets you modify the alignment of the whole table (left, center, or right).

Table Alignment

In case you change your mind and decide to add/remove columns or rows to/from your table, select the Edit Table option.

Add Remove

The fourth option enables you to change the column alignment. By default, it’s set to left, but you can set it either to center or right.

Column Alignment

Additional table settings are displayed on the right side of the screen, where you can set fixed table cell width as well as add header and footer sections to your table.

Block Options

Moreover, you can alter the background row color and select one of the four available hues (this option is placed right below Table Settings).

Block Options

If you would like to make additional alterations to your table and format or create more advanced tables, you would have to either use some good ole’ coding or install a powerful plugin. We’ll go with the latter and show you how to make the most of the TablePress plugin.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Create WordPress Tables with the TablePress Plugin

TablePress

TablePress is currently the most powerful table plugin on the market and you can use it free of charge. It lets you effortlessly create and add tables to your website and edit them to your liking. It packs far more options than the Gutenberg’s Table block and is also a great solution if you’re using the Classic Editor since you can’t add tables to it unless you’re up for some coding.

Once you start creating the new table, you’ll have the option to add its name, description, and set the number of columns and rows (the default value is 5 x 5).

Table Press Add New

Once all the parameters are set, press the Add Table button.

You will then see a huge table editor divided into multiple sections you can use to enter data and manipulate the table however you please. The number of edits you can make is truly staggering.

At the top of the page, you can see the Table ID. The ID is important because you’ll need to insert it into the shortcode [table id=<the-ID> /] that you will later use to add your table to a page. The ID is set to 1, but in case you should change it, make sure to modify the shortcode as well.

Table ID

Under Table Content, you should add data to your table. You can drag-and-drop both columns and rows to change their position. To do that, place the mouse cursor on the name of the column and/or the row number and rearrange their positions however you wish. Moreover, next to the name of each column are two small arrows that will help you sort the content in alphabetical or numerical order.

Table Content

If you click on the triangular shape at the bottom right corner of each cell, you’ll be able to change the cell’s size simply by dragging your mouse.

Table Content

TablePress lets you add not just textual content to your table, but also links and images. To go about that, you first need to select the cell where you wish to display such content. Then, under Table Manipulation click Insert Link or Insert Image.

When you press the Insert Link button, a pop-up window will show up, where you can add your link and decide if it should open in a new tab or not. You can also link to the already existing content on your site.

Add Link Open in New Tab

As for adding images, once you’ve clicked the Insert Image button, your media library will open, so you can select one of the already uploaded files or add a new one. When you find the desired picture, click the Insert Into Table button and the image will show up within the selected cell.

Add Image Media

You can add/remove as many columns and rows as you want, hide them, duplicate them, as well as combine cells.

Under Table Options, you have the possibility to add a header and/or a footer to your table, enable alternating row colors, add CSS classes, and more.

The final section of the editor contains options that would enable visitors to sort the table how they want, use search and filter options, display table pagination, etc.

When you’re happy with how everything looks, it’s time to save all the changes and add the table to your page. As we’ve mentioned earlier, you’ll have to use a shortcode displayed at the top of the table editor to do that. Copy the [table id=<the-ID> /] shortcode, go to the page or post where you wish to showcase the table and select the page builder of your choice. If you’re using Gutenberg, paste the link into the Shortcode block. In the Classic Editor, add the link to the text editor. And lastly, Elementor users need to use the Shortcode widget in which they should insert the link.

Another cool thing about the TablePress plugin is that it allows you to export and import tables. You get to choose the export/import formats, decide if the newly imported table should replace the existing table or be displayed as an entirely new table, and more. The exported data can be added to Microsoft Excel, Google Sheets, or any other spreadsheet program.

To enhance the power of the TablePress plugin and take it on a whole new level, you can add extensions to it. The list of all available extensions is impressive and it allows you to add pretty cool features to your tables, such as row filtering, column filter, and many others. The plugin’s author made sure you can use them all free of charge, even the ones that come with the Premium tag.

Conclusion

If you intend to create a simple table, then the Gutenberg’s Table block should suffice. It features all the basic options and is easy to use. Plus, if you know how to code, you could further increase its functionality. But in case coding is not exactly your forte or you don’t want to bother with it at all, the TablePress plugin has got it all. It ensures the hassle-free creation of tables that you can tweak however you need, without having to spend a dime from your pocket (although, donating to the author is an option).

Post your comment

Comments0