How to add tables to your site

Adding a table allows you to organize information in an easy-to-read and clear way. This tutorial will explore adding tables using the Table block and a plugin. We will also briefly look at creating a table with data from Google Sheets or Excel.

Learning outcomes

1. Using and modifying the Table block.
2. Adding a table to your site with data from Google Sheets or Excel.
3. Create a table using a plugin.

Comprehension questions

1. How can you utilize tables on your website?
2. What are the advantages of using a table builder plugin?

Transcript

Hi, and welcome to Learn WordPress. Let’s talk about how to add tables to your site. Adding a table allows you to organize information in an easy-to-read and clear way. You might want to display data, an event schedule, a pricing table, or even a list of resources. Tables can be added in WordPress with or without using plugins. But of course, plugins will provide more customization options.

First up is the Table block. To add a Table block, click on the inserter top left and type in ‘table.’ Or type in forward slash table and then select the block from here. Once inserted, you can choose the number of columns and rows you want to add. We can go ahead and change it to three columns and three rows, and then click on Create table. Once the table is inserted, we can click on Edit table in our block toolbar to manage rows and columns. It’s possible to insert a row or column before, insert a row or column after, and delete a row or column. We can also use the block toolbar to change the table’s width, for example, to wide or full width. As well as the alignment of the text.

Let’s go ahead and add some content to our table. So first things first let’s open our list view, and ensure that we select our Table block. And then, below settings, I am going to enable the header section. My table is about movies, so my first column will include the movie’s name, the second column will include the genre of the movie, and the last column, the year it was released. Then we can go ahead and add the content. Now we can take a closer look at our settings and style options. Firstly, we can enable fixed-width table cells. This means rather than adapting the column width to the content of the table, all columns will be equal in width. But for now, I’m going to deselect that.

Let’s move on to styles. Below styles, you will notice you can choose between default and stripes. The default style has a plain background and borders around the cells. When you select stripes, rows will have different background colors, alternating between two colors. Next, we can also remove the border below the headers by changing the border settings to 0 pixels. Then we can also change the background color of the table. Let’s select a darker color for more contrast.

Once we have changed the background color, I’m going to make my way to typography, select font family, and then go ahead and choose a different font that comes with my theme. Please also note that if you go to dimensions, you can add more padding or margin around your block. But you might decide you prefer the default style. So we can go ahead and reset the color settings, typography, and border and then select the default style. Lastly, I’ve decided to enlarge my border slightly by making it two pixels, and you can even change the color of your border if you wish to.

Did you know you can also style the content of individual cells? Select the content and in your block toolbar, click on the drop-down arrow, select Highlight, and now you can, for example, change the color of the text or you might decide to change the background color. Lastly, you can also, of course, use the bold and italic function within your block toolbar.

It is also worth mentioning that the Table block is mobile responsive, and this is the way my tables will appear on a smaller screen.

Did you know you also have the option to create a table in Google Sheets or Excel and then paste it into WordPress? Let me show you how it works. So I’ve created a new page and would like to advertise the guitar lessons I am teaching. I’ve already created my table in Google Sheets, so let’s make our way to Google Sheets, highlight the information you want to copy, click on edit, select copy, return to your website, and then merely paste. When we open up our list view, we will notice that the data will be displayed via the Table block, and further customizations could be completed here in the block editor.

Lastly, you also have the option to add a plugin if you would like to have more advanced features. When you go to Add new plugin, click on the search block, type in tables and you will see a variety of plugins to choose from. Some options worth exploring are TablePress, Ninja Tables, WP Data Tables, etc. Let’s look at an example. I have installed the free TablePress plugin, and when you are on the dashboard page, we can make our way to add new. And when you are here, you can name your table, add a description and then choose the number of rows and columns. When you are ready, you can click on Add table.

Let’s go ahead and add some content. Once you have added your content, there are certain settings that you can change. Below table manipulation, you can, for example, duplicate insert or delete rows as well as columns, and there’s even an option to combine or merge cells. Below that, there are more options that you can enable or disable. I thought it’s also important to note that this plugin allows you the option to enable sorting, filtering, and even add pagination. Once you are done, we can click on Save changes.

To add the new table, type forward slash, TablePress and then add the table to your post or page and then open up your sidebar settings and select the table you created. Once you are happy with your content, we can update and then preview the table on the front-end. Here you will notice you can filter alphabetically or even the smallest to the largest numbers. Lastly, you even have the option to search for specific content. Please note that if you are after more advanced options, most plugins have pro plans.

Happy creating and visit Learn WordPress for more tutorials and training material.