Tables in WordPress made easy.

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!

Styling, Layout, and CSS

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).

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.

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 tables). The values for font-family, font-size and color can of course be adjusted or removed, if they are not needed.

If you know the row and column numbers of the value in question, you could use CSS like this:

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

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

(where N (the table’s ID), X (the number of the row), and Y (the number of the column) obviously 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

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

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

.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 tables). This is the general pattern I recommend. You can use this as often as needed, changing the column in question to the correct number each time.

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

The most important selector should be .tablepress which applies to all tables generated by the plugin. 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;}

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

(property1 and property2 are just for demonstration and need to be changed to the CSS property that you want to change.)

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

Troubleshooting

When this error occurs, this usually means that there’s another plugin interfering with the table saving mechanism in TablePress (by hooking into the internal WordPress post saving functions). In most cases, this only affects tables with quotation marks " in the cells (e.g. as part of HTML code).

Unfortunately, this can not be fixed in TablePress, but must be fixed in the plugin that is causing this. The first step therefore is to find that plugin. To do that, please deactivate all plugins, except TablePress, one by one. Each time, check if a newly added and edited table (that should contain quotation marks "!) still gets corrupted. Once the problem disappears, you have found the plugin that causes this problem. One plugin that is known for this is “Outbound Link Manager”.

Once you have found the faulty plugin, you should leave that plugin deactivated, at least while you edit tables. Additionally, you should contact the developer of that plugin, and ask him to stop using the PHP function stripslashes on the entire $_POST array (which usually causes this). Also, it would be nice if you could notify me about your findings, via the WordPress Support Forums.

The next step would then be to restore the corrupted table. If it’s just a very small table, you could just re-create it from scratch. Otherwise, it’s the easiest to import it again from a file, if you have one. If you don’t, we can try to restore it from an old revision of the table, which could still exist in the database. For 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 assist in restoring the table.

If the “Use DataTables” checkbox is checked on a table’s “Edit” screen, but functions like sorting, search, or pagination are not showing up, this usually indicates a JavaScript problem.

The most common reason for this is an old and outdated version of the jQuery JavaScript library, that some themes or plugins load — although WordPress already ships with the correct and up-to-date version. To check for this, please search the generated HTML source of the page with the table (accessible via the “View Source” feature in the 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

Another reason for this issue could be a broken script by another plugin. 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. Each error should have a filename next to it, from which you can extract the name of the plugin that has the error. Then, try loading the page again after temporarily deactivating that plugin in WordPress.

About the Developer

Tobias Bäthge is a PhD student in the field of “Engineering Cybernetics” from Magdeburg, Germany. He loves baseball and likes to work with WordPress.