Frequently Asked Questions (FAQ)

This page lists answers to often asked questions about TablePress. Using these answers does usually not require programming or coding experience. For more technical questions, please also refer to the documentation.

Please look through these questions, before asking for support. Thanks!

General

Migration from WP-Table Reloaded

For more information on how to easily switch from WP-Table Reloaded to TablePress, please follow the migration guide.

Even if everything is working fine with your WP-Table Reloaded installation, it is highly recommended to switch to its successor TablePress. As WP-Table Reloaded will not receive any further updates and is no longer supported, switching to TablePress is the only way to make sure that everything will continue to work fine!

Styling, Layout, and CSS

How and where do I add “Custom CSS” code?

To add CSS commands (Cascading Style Sheets), just go to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress and enter them there. They will override the default styling, so that you do not have to change any files directly (such modifications would be lost after each TablePress update).

How can I change the background color of a single row?

Changing the background color of a single row, e.g. to highlight it, can be done with some CSS like this:

.tablepress-id-N .row-X td {
	background-color: #ff0000;
}

where N (the table’s ID), and X (the number of the row) need to be adjusted to your table! #ff0000 is the HEX color code of the desired color, in this case red.

This just needs to be entered into the “Custom CSS” text field on the “Plugin Options” page of TablePress.

How can I change the background color of the table head row?

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress thead th,
.tablepress tfoot th {
	background-color: #ff0000;
}

To also change the hover color when sorting, and the background color of the column that is currently sorted, add

.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #00ff00;
}

How can I change the color used for marking alternating rows?

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress .odd td {
	background-color: #ff0000;
}
.tablepress .even td {
	background-color: #00ff00;
}

You can change the color of odd and even rows, but generally you will only need to change the color of odd rows. If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

How can I change the color used for highlighting hovered rows?

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress .row-hover tr:hover td {
	background-color: #ff0000;
}

If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

How can I change the font, font size and font color of a table?

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N tbody td {
	font-family: Tahoma;
	font-size: 14px;
	font-weight: bold;
	color: #ff0000;
}

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector to have this code apply to all TablePress tables on the site). The values for font-family, font-size, font-weight and color can of course be adjusted or removed, if they are not needed.

How can I highlight certain cells or their content?

If you know the row and column numbers of the value in question, you could use CSS code in the “Custom CSS” textarea on the “Plugin Options” screen of TablePress like this:

.tablepress-id-N .row-X .column-Y {
	background-color: #ff0000;
	color: #ff0000;
}

(where N (the table’s ID), X (the number of the row), and Y (the number of the column) need to be adjusted to your table.)

If you don’t know the row and column numbers (or they sometimes change, or you have more than on value to highlight), I recommend creating a new CSS class for a HTML <span> element. You would then wrap the value in the span tag, like

<span class="highlight-1">your first important value</span>
<span class="highlight-2">your second important value</span>

and could create approriate CSS like

.tablepress .highlight-1 {
	color: #ff0000;
	text-decoration: underline;
}
.tablepress .highlight-2 {
	color: #00ff00;
	font-weight: bold;
}

Here, highlight-1 and highlight-2 are just examples for possible CSS class names. You can adjust these to give their names a meaning, but have to be consistent in HTML and CSS code.

How can I set column widths?

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N .column-2 {
	width: 100px;
}

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector, if you want this to apply to all TablePress tables on your site—which is normally discouraged, to not lose flexibility).

This is the general pattern that I recommend. You can use this as often as needed, changing the column in question to the correct number each time. If you want to set multiple columns to the same width, follow the pattern

.tablepress-id-N .column-2,
.tablepress-id-N .column-4,
.tablepress-id-N .column-7 {
	width: 150px;
}

Note: In most cases, it is not necessary to set the column widths directly! Instead, you might want to reduce the padding (the white space between the text in a cell and the edges of a cell), with the CSS code

.tablepress-id-N .column-2 {
	padding: 4px;
}

which again needs to be adjusted as above.

Please keep in mind that it will not always be possible to reduce the width of a table column, as by default the longest single word or other content in a column defines that column’s minimum width.

How do I center a table on the page?

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N {
	width: auto;
	margin: 0 auto 1em;
}

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector, if you want this to apply to all TablePress tables on your site).

How do I remove the borders from a table?

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N thead th,
.tablepress-id-N tfoot th {
	border: none;
}

In this code, the N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector (five times) to remove the border from all TablePress tables on your site).

If you are still seeing border lines in your table after adding this code, it might be necessary to raise the priority of this command above the commands from e.g. your theme. For that, please change the line with the CSS property to

border: none !important;

What CSS selectors are available?

The most important CSS selector is .tablepress as it applies to all TablePress tables on your site. If you don’t want to apply a styling setting to all tables, but just to certain ones, you can use .tablepress-id-N, where N is the ID of the table.

In most cases you’ll want to style a cell, so the CSS command will look like this:

.tablepress-id-N tbody td {
	property1: value1;
	property2: value2;
}

(Here, `N` has to be changed to the table’s ID, whereas property1 and property2 are just for demonstration and need to be changed to the CSS properties that you want to change.)

You can find a more thorough list of available CSS selectors in the documentation.

Troubleshooting

TablePress is missing in the admin menu on the Dashboard

If you can not see the TablePress entry in the admin menu of your WordPress Dashboard, there is usually a small problem with the TablePress access rights and capabilities. This can sometimes happen during installation or if user access rights and user roles are edited later.

To restore the TablePress menu entry, we can try to reset the access capabilities. For that, please:

  1. Go to https://example.com/wp-admin/options.php in your browser, with your site’s URL of course. On this “All Settings” screen, you should see a list of internal WordPress configuration data, the so-called “WordPress Options”, with input fields to change their values. Please be advised that this is a powerful tool, so please proceed with caution.
  2. Scroll down to the tablepress_plugin_options option. (To reach it quicker, you could also use the browser search function, by typing Ctrl/Cmd+F.)
  3. In the text field next to tablepress_plugin_options, find the text "plugin_options_db_version":. Right after that, there should be a number like 38. (The exact number depends on the used version of TablePress and doesn’t matter here.)
  4. Change that number to 0 (zero), but please be very careful to not remove the surrounding quotation marks or other characters!
  5. Scroll down to the bottom of the page and click the “Save Changes” button.

This process should reset the internal TablePress access capabilities, and you should be seeing the TablePress entry in the admin menu again.

(Note that the number after "plugin_options_db_version": that you changed to 0 will have changed to its original value again, which is the correct and expected behavior.)

If this process did not restore the TablePress menu entry, please contact me directly via email (wordpressno-spam@mailtobias.baethge.com) with the details to a temporary admin account to your site. I’ll then gladly take a direct look at this issue on your site.

Tables are corrupted and show “[ERROR] TABLE IS CORRUPTED”

While seeing this error is (understandably) scary, please remain calm—in almost all cases it’s possible to restore the table data. This page tries to provide some guidance for that.

Background

Internally, TablePress stores tables as two-dimensional fields or arrays. To be able to store these in the database, these arrays are encoded to text strings in the JSON format. In this widely used and open data format, certain characters like quotation marks ", backslashes \, and square brackets [] serve as control characters and have special meanings. Therefore, when these characters are used in the actual content, precautions have to be taken to not mix them up with their control character function when it comes to reading (decoding to its original representation) the JSON text string again. This is done by escaping these characters with a prepended backslash \. For example, a quotation mark " is actually stored as \" internally.

All this is completely irrelevant when working with tables in TablePress, as everything regarding loading (decoding) and storing (encoding) the data happens automatically behind the scenes. The escaping however is one reason why JSON text strings are fragile when it comes to direct data manipulation—that is when working with the stored JSON data as plain text outside of TablePress—in contrast to first decoding it to its original data structure.

For example, a process that works with a raw JSON text string must never add extra quotation marks " to it, but it needs to appropriately escape them as \" first. It is also not directly allowed to just append or add extra content or data to the end of a JSON string that represents an array internally. If such a wrong data manipulation is done, the JSON text string will not have the correct format for it to be decoded to its original represenation again—the JSON data is corrupted.

Causes for table data corruption

Possible causes for such corruption of TablePress tables mainly are the wrong or careless handling of JSON content in the database, by other plugins, themes, or even WordPress itself, or security breaches and hacks of websites, databases, or servers. From a more technical perspective, this can for example mean that something on your site or server

  • removed the escaping backslashes \, e.g. by wrongly using the PHP stripslashes() function,
  • inserted content that includes quotation marks " into the JSON string, but without the mandatory escaping backslashes \,
  • or appended extra text or code to the end of the JSON string.

While the first of these possibilities does not happen often anymore, the problem of text or code being automatically appended to the JSON strings can still be observed at a small but constant rate. Very often, this is done by automated scripts that append malicious HTML and JavaScript code to all posts, pages, and tables of a site, with the intent to possibly infect the visitors’ computers with malware or to display ads on your site. One indicator that your site or database might have been hacked and modified in this way is that all TablePress tables show the corrupted data error.

The second mentioned possibility became a problem for some time with the release of WordPress 5.1 at the end of February of 2019, due to a bug in it. In most cases, only a few but not all tables on the site would be affected here, and only if they contained certain HTML code for a clickable link.

Fixing and restoring corrupted table data

You most likely were directed to this page by a notice on the TablePress screens of your site, telling you that the internal data of a table is corrupted. This means that the JSON text string that was read from the database could not be decoded into a two-dimensional array properly. To fix the JSON text string, the wrong parts in it have to be identified and either be corrected or be removed. To stick with the possible causes from the previous section, content that was added without the escaping backslash \ probably just needs that inserted, while extra HTML <script> tags from a hacking script need to be removed from the end of the JSON code.

For most cases that I have seen in the past, this process can be automated. I therefore developed a WordPress plugin, the “TablePress Extension: Fix corrupted tables”, that will do this for you.

  1. To restore your corrupted tables, please download the “TablePress Extension: Fix corrupted tables” plugin as a ZIP archive to your computer.
  2. In your WordPress admin dashboard, go to “Plugins” -> “Add New”, and click the “Upload Plugin” button near the top.
  3. Choose the ZIP file that you downloaded in step 1 and upload it. (Alternatively, you could extract the ZIP archive and upload the contained folder to your site’s /wp-content/plugins/ folder via your FTP program.)
  4. On the next screen, click the “Activate Plugin” button.
  5. The Extension will then try to fix the internal JSON data format of the TablePress tables by performing simple search/replace operations in your database.
  6. After this, you will see a notice text at the top of the screen about the process, including some success statistics, and a suggestion to create a backup.
  7. Finally, you may go to the “Plugins” screen and “Deactivate” and then “Delete” the “TablePress Extension: Fix corrupted tables” plugin again.
  8. In addition, on the “Plugins” screen, please make sure that you have updated TablePress to the latest version!

Please be assured that I’m very sorry that you experienced corrupted TablePress tables on your site! I’m doing everything I can to prevent this in TablePress, but unfortunately, I can’t protect your table data from external influences on the database, like other plugins or scripts with malicious intent. It is therefore always recommended to keep a backup of your site as a whole, and your tables in particular, e.g. by exporting them to files.

If you find that the Extension did not restore all your TablePress tables, it is possible that they are corrupted in other ways. Most likely, we’ll still be able to restore the data. For help with that, please contact me directly via email (wordpressno-spam@mailtobias.baethge.com) with the details to a temporary admin account to your site. I’ll then gladly take a direct look and assist with restoring your table data!

If TablePress or this Extension is helpful for you, please consider supporting further TablePress development with a donation. Thank you!

Sorting or other JavaScript functions are not working

If the “Use DataTables” checkbox is checked on a table’s “Edit” screen, but functions like sorting, search, pagination, or from TablePress Extensions are not working in your tables, this usually indicates a JavaScript problem.

To check for that, please use the built-in “Developer Tools” of your browser. Right click your page and pick “Inspect Element” (in Chrome, Firefox, and Opera) or press the F12 key (in Internet Explorer). You should then see the “Developer Tools”, where you can switch to the “Console” tab to see JavaScript problems on the page.

Depending on the shown error messages, we can then narrow down the cause. Here’s a list of common possible error messages and their causes:

Error: Uncaught TypeError: Cannot read property 'mData' of undefined

This error message indicates a problem with the table structure. The DataTables JavaScript library requires that the table has a rectangular structure, which means that every row must have the same number of cells. Unfortunately, this means that it is not possible to use both the JavaScript features and cell merging/combining, using the #colspan# or #rowspan# keywords, at the same time. You will have to decide what’s more important for your table: Using the JavaScript features or combining cells. Having both for one table is not possible.

If you are not using the #colspan# or #rowspan# keywords in the affected table, chances are high that the HTML code in your table is broken somewhere. A visual indicator for this can be tha content or cells in the table are shifted, e.g. they are shown on the left of the other cells in the same column. Very often, this happens when using HTML code for a link in the table. It is very important that e.g. quotation marks " are used properly around the values of HTML tag attributes, e.g. around the URL after the href= attribute. Please check that this is the case for all HTML tags in your table.

Error: Uncaught ReferenceError: jQuery is not defined

A common reason for this error message is the use of plugins that minify, concatenate, or try to optimize the loading of JavaScript or CSS files on your site. Due to the large variety of plugins, these sometimes can not properly maintain script dependencies or the necessary loading order of files. If you see this error, you should therefore try again after temporarily deactivating any such JavaScript/CSS optimization plugins.

Another reason for this is error could be that an old and outdated version of the jQuery JavaScript library is loaded on your site. There are some themes and plugins that still do this, even though WordPress already ships with the correct and up-to-date version of jQuery. To check for this, please search the generated HTML source code of the page with the table (accessible via the “View Source” feature in your browser) for the string jquery. If there’s more than one result within HTML <script> tags, this means that the library is loaded multiple times. If that is the case, the loading of the old versions should be stopped, so that only the version that comes with WordPress is loaded. This usually means deleting a line similar to

<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.js"></script>

from the theme’s “header.php” file. Other variants are lines like

wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ... );

in the “functions.php” file.

No or other error messages

If you don’t see any JavaScript errors, please make sure that the “Use DataTables” checkbox is really checked on the table’s “Edit” screen. Please also check if the JavaScript code load and initialize the DataTables JavaScript library is part of the generated HTML source code of the page. To check for this, please search that source code (again accessible via the “View Source” feature in your browser) for e.g. “datatable”.

If you are seeing other error messages than those from above, or if you are seeing other unexpected behavior of the JavaScript library, please open a new topic in the TablePress support forums, and make sure to include a link to the page with the table where this error happens!

Top