FAQ

WP-Table Reloaded is outdated!

WP-Table Reloaded has been replaced by TablePress. For more information, please see the announcement post and the official TablePress website.

This pages lists answers to Frequently Asked Questions (FAQ) about WP-Table Reloaded.
I’ll try to add questions, as I answer them in comments or in the WP Support Forums.

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

If you have a question that might fit here (and maybe the answer to it), please email me.

To view the answer to a question, just click on it. (Show all answersHide all answers)

CSS, Layout, and Styling

How and where do I add CSS code?
To add CSS commands, just go to the "Custom CSS" textarea on the "Plugin Options" screen and enter them there. They will override the CSS commands from the included files, so you do *not* have to change them in those files!
How can I change the background color of a row?
Changing the background color of a row in the body of the table just requires some CSS like this:
.wp-table-reloaded-id-N .row-X td {
   background-color: #ff0000!important;
}
(where N (the table's ID), and X (the number of the row) obviously need to be adjusted to your table. )

This just needs to be entered into the "Custom CSS" textfield on the "Plugin Options" page.
How can I change the background color of the table head?
This can be done with the following CSS code (that just needs to be added to the "Custom CSS" textarea in the "Plugin Options"):
.wp-table-reloaded-id-N th, .wp-table-reloaded-id-N .sorting {
  background-color: #ff0000!important;
}

.wp-table-reloaded-id-N .sorting_asc, .wp-table-reloaded-id-N .sorting_desc {
  background-color: #00ff00!important;
}
The N needs to be changed to the ID of the table (4 times) in question (or use .wp-table-reloaded as the first part of the selector).

The first CSS command sets the general background color. The second command sets the color for the table head that is currently sorted.
How can I change the color used for highlighting hovered rows?
This can be done with the following CSS code (that just needs to be added to the "Custom CSS" textarea in the "Plugin Options"):
.wp-table-reloaded-id-N .row-hover tr:hover td {
  background-color: #ff0000!important;
}
The N needs to be changed to the ID of the table in question (or use .wp-table-reloaded as the first part of the selector).
How can I change the color used for marking alternating rows?
This can be done with the following CSS code (that just needs to be added to the "Custom CSS" textarea in the "Plugin Options"):
.wp-table-reloaded-id-N .odd td {
  background-color: #ff0000;
}

.wp-table-reloaded-id-N .even td {
  background-color: #00ff00;
}

The N needs to be changed to the ID of the table in question (or use .wp-table-reloaded as the first part of the selector).

You can change the color of odd and even rows, but generally you will only need to change the color of odd rows.
How can I change the font, font size and font color of a table?
This can be done with the following CSS code (that just needs to be added to the "Custom CSS" textarea in the "Plugin Options"):
.wp-table-reloaded-id-N td {
  font-family: Tahoma;
  font-size: 14px;
  color: #ff0000;
}
The N needs to be changed to the ID of the table in question (or use .wp-table-reloaded as the first part of the selector). The values for font-family, font-size and color can of course be adjusted or removed if 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 like this:
.wp-table-reloaded-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 the span element. You would then wrap the value in the span tag, like
your important value
and could create approriate CSS like
.wp-table-reloaded .hilite {
  color: #ff0000;
}
How can I set column widths?
This can be done with the following CSS code (that just needs to be added to the "Custom CSS" textarea in the "Plugin Options"):
.wp-table-reloaded-id-N .column-2 {
  width: 100px;
}
The N needs to be changed to the ID of the table in question (or use .wp-table-reloaded as the first part of the selector).

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. ATTENTION:
If you are using the DataTables JS library for that table, you will also need to add the following code to the "Custom Commands" textfield of the "DataTables JavaScript Features" section on the "Edit Table" screen for the table in question!
"bAutoWidth": false
How do I center a table on the page?
Centering a table is possible with CSS. This is dependant of the used theme though, as the theme's CSS might be overriding certain commands.
You’ll need to embed the shortcode [table id=N /]into a new HTML <div> container, which then needs to be styled with CSS commands like width:100%; text-align:center;. This should center the table within the <div>. (Watch out to check the actual HTML output of the page, because WordPress sometimes adds <p> elements into the code.)
Here's an example that works in most cases:
[table id=N /]
How do I remove the borders from a table?
This can be done with the following CSS code (that just needs to be added to the "Custom CSS" textarea in the "Plugin Options"):
.wp-table-reloaded-id-N, .wp-table-reloaded-id-N td, .wp-table-reloaded-id-N th {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}
The N needs to be changed to the ID of the table in question (or use .wp-table-reloaded as the first part of the selector).

Depending on the used webbrowser, it might also be necessary to add a cellspacing attribute to the HTML of the table. This can be done by adding another parameter to the used Shortcode, namely the cellspacing="0" parameter, i.e. as in [table id=N cellspacing="0" /]. This should remove all borders that were not "caught" by the CSS, which mostly happens with Internet Explorer 7.
What CSS selectors are available?
The most important selector should be .wp-table-reloaded 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 .wp-table-reloaded-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:
.wp-table-reloaded-id-N td {
  property1: value1;
  property2: value2;
}
(property1 and 2 are just for demonstration and need to be changed to the CSS property that you want to change.)

DataTables JavaScript Features

How do I get the table to display all the rows or change the default of 10?
This feature is called "Pagination" and is offered by the DataTables JavaScript library.

You can turn off Pagination completely by unchecking the corresponding checkbox in the "DataTables JavaScript features" on the "Edit table" screen for the table in question.

The following description is obsolete in WP-Table Reloaded 1.7 and higher, as it now has a textfield for the initial number of rows in the section mentioned above.

Or you can change the default number of entries to show. For that, just paste the code
"iDisplayLength": 50
into the "Custom Commands" textfield in that section.

You can of course adjust "50" to any number you like.

Plugin Extensions

What are "Plugin Hooks"?
With a "Plugin Action" or "Plugin Filter" you can develop custom Extensions for WP-Table Reloaded. For that you just need a small code snippet. For WP-Table Reloaded, the concept is explained in this introductory post and on the Extensions page. Once in a while I will publish blog posts with such Extensions for you to use. There is general introduction to "Plugin Hooks" in the WordPress Codex.