TablePress Plugin Tutorial for WordPress Users

In our previous article we have seen how to add tables in WordPress site using different methods. Gutenberg block editor has in-built table block making the use of addition plugin obsolete. However, TablePress is one of the plugins allow users to add attractive table on WordPress site easily. In this article let us explore the features and how to use TablePress plugin.

Learn WordPress: Check out 500+ free WordPress tutorials.

Why TablePress Plugin?

Navigate to “Plugins > Add New” option in WordPress admin dashboard and search for the keyword “Table”. You will find thousands of plugins for creating different type of tables and searching for “tablepress” will show the TablePress plugin on first page.

• It is a complete free plugin by author Tobias Bäthge. Though extensions are offered as separate premium plugins there are no intrusive banners or links asking you to upgrade from the dashboard.
• 800K+ active installs with 5 star rating from almost 4K users can’t be a wrong judgement.
• Decent documentation and very good supporting on the forum.
• Create uniform looking tables through the site and also customize any particular table’s look using custom CSS.

Features of TablePress Plugin

The plugin has the following features which is sufficient to create tables for most of general purposes:

• Tables can be created and embedded on any pages of your site as a shortcode.
• Import tables from Microsoft Excel in XLS, XLSX and CSV formats. Also importing by manual copy paste and from JSON/HTML format is also possible.
• Tables can be exported in CSV, JSON and HTML formats.
• Direct inserting of table shortcode on visual editor.
• Individual tables can be customized with custom CSS.
• Complex data tables with search box, pagination and filtering can be created easily.

How to Use TablePress Plugin?

Install and activate the plugin to see an admin menu created as shown below:

The position of the TablePress menu can be modified under “Plugin Options” section.

The plugin has the following sections:

• All Tables – shows the list of all created tables.
• Add New – allows creating a new table.
• Import – offers various options for importing single and multiple tables.
• Export – offers various options for exporting single and multiple tables.
• Plugin Option – individual tables can be customized with CSS under this section.
• About – shows the details about the plugin and other details.

Creating Table in TablePress

Navigate to “Add New” tab where you can enter basic details like table name, short description and choose number of columns and rows to create a table.

The next screen will show you plenty of options in multiple sections. You can easily be familiar with these options by creating one or two sample tables.

SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.

Table Information Section

Here you can view the basic details you had entered on the creation screen along with the shortcode for your table.

Table Content

Here is where you need to enter the actual content of your table in rows and columns; the first row is by default considered as a table heading which you can change it under the “Table Options” section.

Table Manipulation

This section offers the following features:

• Add rows and columns to your table.
• Hide, show, delete, duplicate and insert rows and columns.

• Click on the “Insert Link” button and choose the table cell to open the default WordPress insert link popup. You can also directly add links using HTML anchor tags.
• Similar to links, click on the “Insert Image” and click on the cell to insert images from WordPress media library. You can also directly add images using HTML img tag.
• The advanced editor allows you to add formatted content using simple editor.

• Use rowspan and colspan options to combine cell on a row and columns.

Rowspan and Colspan attributes can’t be used on advanced data tables using JavaScript library for sorting.

Table Options

Here you can define the header, footer, different colors for alternate rows and highlight row on hover. You can also display the table name and description above or below the table.

Add extra CSS classes to customize the appearance of the table, you need to use these CSS classes at theme level and define styles.

Features of DataTables JavaScript Library

When you have enabled the first row of the table as header under “Table Options” section, then the table can be converted to a data table by enabling the features under this section.

• Sorting based on the any of the column just by clicking on the column.
• Searching / Filtering – allows to show a search box on top right corner of the table and users can filter the results by entering a keyword. This is a very useful feature especially when you have many rows and the content is not visible due to pagination.
• Pagination – enable pagination to show only particular rows with “previous / next” pagination links at bottom right corner of the table. You can also allow the user to filter and view particular number of rows.
• Enable horizontal scrolling if you have many columns in the table and add custom commands if you know how to use advanced data tables.

Once you have completed the options, preview the table and save the changes. You can also delete, copy and export the table from the same screen.

Inserting Table on a Post or Page

Each table in TablePress will have a unique id which can be seen on the “Table Information” section. You can use this as a shortcode in Gutenberg editor or insert the table code on Classic editor using TablePress icon.

Viewing All Tables

All the tables created with TablePress can be seen under “TablePress > All Tables” menu. You can carry out actions like copy, export and delete on individual tables as well as on bulk.

Importing Tables

Though creating a table is easy on the screen, it will be tedious task for large tables. In such scenarios, you can create tables using excel spreadsheet in XLS, XLSX or CSV format and import it on your WordPress site under “Import” tab of TablePress plugin. Navigate to “Import” tab to see the below options:

• Importing source can be from a file on your local computer, from a URL, from a file on a server or a manual input.
• Based on the source, either upload the file from your local computer or provide the required details.
• Choose the file format, if you are using XLSX then choose “XLSX – “ option from the dropdown. Though XLSX is still a beta option, it works perfectly as we tested.
• Choose whether to create a new table or modify or append an existing table. Choosing replace and append options will show a dropdown list of all existing tables from which you can select a table.
• Click on the “Import” button start importing table.

The plugin allows importing multiple tables as a zip file. For example, if you have five XLSX spreadsheet tables, put all files in a single folder and compress it in a zip format. Just upload the zip file to create five tables.

Exporting Tables

Similar to importing, all existing tables can be exported to CSV, JSON or HTML format to your local computer. Also the plugin allows selecting multiple tables and exporting as a zip file.

The CSV and HTML formats only export the table content and JSON format includes the table options as well.

Customizing Tables in TablePress

Till now what we have seen are the default options and under “Plugin Options” tab  you can enter custom CSS to control either all tables uniformly or control individual tables display.

Below are the selectors to define your style:

• .tablepress – all TablePress tables should have this class.
• .tablepress-id – used to style a specific table.
• .column-id – used to style the column of a table.
• .row-id – used to style the row of a table.

Below is an example table created with TablePress, let us assume the id as 3 and some of the customizing styles are given based on this example:

Below CSS code need to be added in the text area under “Plugin Options > Custom CSS” and ensure to check the option “Load these “Custom CSS” commands to influence the table styling”.

Change the width of the second column to 200px:

.tablepress-id-3 .column-2 {
width: 200px;
}

Change background color of row 2 to red:

.tablepress-id-3 .row-2 td {
Background-color: red;
}

Change the color of alternative rows:

.tablepress-id-3 .odd td {
background-color: red;
}

.tablepress-id-3 .even td {
background-color: blue;
}

Change color of row on hover:

.tablepress-id-3 .row-hover tr:hover td {
background-color lightgrey;
}

General Issues

There are few basic issues we noticed when using TablePress:

• Responsiveness of tables on mobile devices which can be resolved by installing the plugin extension.
• Inserting tables on footer or sidebar of the site – this can be addressed by using template tags with “$query” as string or array. For example, below is an example to get the table data for the table id=1:

<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false ) ); ?>

If you face any other specific issue on your site, refer the forum to see whether it is addressed and checkout the documentation before raising the support query. We noticed most of the issues have been addressed in one of these places.

Note: Inserting HTML tags in table cells are not supported, though you can use image tag, link tag, use advanced editor and extension for adding links.

TablePress Extensions

Though the basic needs can be satisfied with the free version of the plugin, you can download additional extensions from TablePress Extensions Page for enhancing features of the tables. Again as a contribution to community the author offers all extensions for free and names few as premium with a request of donation. Out of all extensions, we found “Responsive Tables” is the one you may need to make the table viewable on mobile devices. Each extension can be downloaded and installed by uploading the zip file through your WordPress admin dashboard under “Plugins > Add New > Upload Plugin”. You can also use FTP to upload the extracted plugin folder under “/wp-content/plugins/”.

Below is an example table created with flip style using responsive tables extension.

TablePress SEO

The most important aspect of creating tables with TablePress plugin is the SEO – tables are more search engine friendly especially on Google. Below is an example of a Google search result showing the table content in more appealing manner with the total number of items:

Google shows the result with table if your page gets enough traffic for the keywords within the table content. Though the meta description of the page is not displayed, we noticed the table view attracts more users than the simple text.