What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add Tables in WordPress Posts and Pages

How to Add Tables in WordPress Posts and Pages

WordPress has a powerful visual editor that allows you to come out any kind of web content easily. However, there are still some effective contents that this tool cannot achieve, such as the tables. Surely, you can also leverage the text editor and write down the CSS and HTML for creating the tables. But for most common webmasters who lack the related knowledge, this is not an easy way. Considering this, in the following, we’d like to introduce the simple steps of how to add tables in WordPress posts and pages without the need to learn any coding knowledge.

In fact, the content type of table now is adopted by many website owners. With it, you can showcase the data and statistics in the clear and effective manner. Especially, if you need to present plenty of data, a table works better than the pure words. Now, there are a lot of WordPress table plugins you can use. This time, we highly recommend the TablePress plugin.

Step 1 – Decide Some Plugin Options

Once you have installed this table plugin to your WordPress site, you need to click the TablePress > Plugin Options button. These settings will influence the common plugin behavior.

Plugin Options

Firstly, you need to make sure whether to apply to the default styling of the tables. If you want to change the style for more customization, you can enter some commands and coding stuff into the “Custom CSS” area.

In addition, you can decide the menu entry in the admin panel. By default, this plugin can be checked in the middle of the whole menu. Also, it is recommended to move it to the Posts or the Pages menu.

Step 2 – Add A New Table

Now, you can start creating the table by clicking the Add New Table button. Here, you firstly should enter the table name, along with the table description for the easier management and identification. In addition, you should enter the exact values for the number of rows and the number of columns for your table. After that, you should hit on the Add Table button.

Note that you can always make some changes on these aspects later if needed.

Add Table

Step 3 – Specify the Table Content

In the next page, you can move to the area of Table Content to enter the exact values for this table. Here, we need to mention that you have the freedom to drag and to drop each row and each column. This way, you can rearrange the content order in the way you prefer.

Specify the Table Content

By default, you can only enter the textual content, numbers, symbols and the characters into the table. Moreover, you can move to the Table Manipulation part to insert some extra contents, such as the images and the links.

In addition, you can make use of the Advanced Editor tool to enter the table content in the much easier manner.

Advanced Editor

This section also has some additional useful buttons that allow you to hide, show, duplicate, delete and insert some rows or columns. Even, you can add some extra rows and columns with your wanted number.

Table Manipulation

Here, it is possible that you want to combine the cells in the row or in the column. If so, you can select your targets and click the Rowspan button or the Colspan button.

Colspan Table

Step 4 – Determine the Table Options

After entering the table content, now, you also need to determine some table options. For instance, you should decide whether to make the first row as the table header and the last row as the table footer, whether to showcase the table name and the table description above or below the table when printed, whether to highlight the row when the mouse hovers over it with the changed background color and whether to alternate the colors of the consecutive rows.

Table Options

Step 5 – Enable the JavaScript Library of the Table

By default, you can enable the sorting function for this table, allow people to search or to filter the table content, allow the pagination of the table with the exact number of rows for each page, enable people to change the row numbers when using the pagination function, allow the display of the current table information and achieve the horizontal scrolling to make a viewing of the column-heavy table an easy thing.

JavaScript Library of the Table

In addition, if you dislike the default settings, you can add your custom commands as well. Note that before you save the changes, you can click the Preview button to know whether the table is what you want.

Step 6 – Showcase the Table

This plugin allows you to embed and to display the tables in any of your posts, pages and even the text widgets using the custom shortcode. To find the related shortcode, you simply need to click the All Tables button, hover the mouse on the target table and click the Show Shortcode button.

Table Shortcode

This way, a popup window will appear to carry your wanted shortcode. Now, you simply need to copy and paste the code into the exact location of your target page. Or, you can use the TablePress tool that can be found from the WordPress visual editor to insert the shortcode in a simpler way.

Insert Shortcode

In most cases, the table can be displayed just like the following.

Table Demo

Author

Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. This girl is popular among our readers as she is outgoing and energetic. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *