BugWP logo BugWP
Back to Community
Home / Community / Plugin → Tablepress – tables in wordpress made easy

How to Highlight Rows and Cells in TablePress Based on Content

34 threads Sep 17, 2025 Plugin → Tablepress – tables in wordpress made easy

Content

Highlighting specific rows or cells in your TablePress tables is a powerful way to draw attention to important information. Whether you want to color-code status updates, emphasize key data, or improve visual organization, this guide covers the most common methods to achieve this.

Why Highlighting is Useful

Visual cues like colored rows or cells help users quickly scan and interpret data. Common use cases include:

  • Showing a status (e.g., Open, Closed, Pending).
  • Highlighting rows that contain a specific keyword.
  • Emphasizing cells with important values like percentages or decimals.
  • Making entire rows clickable if they contain a link.

Method 1: Using the Row Highlighting Shortcode Parameter

For basic row highlighting based on text content, you can use the row_highlight shortcode parameter. This is a built-in feature of TablePress.

Shortcode Example:

[table id=123 row_highlight="Open||Closed" /]

Key Points:

  • Use two vertical bars || to separate multiple terms, not a comma.
  • The plugin will search the entire row for the specified text.
  • By default, a CSS class like .highlight-1 is added to matching rows, which you can then style.

Example CSS:

.tablepress .highlight-1 {
    background-color: #d4ffd4 !important; /* Light green */
}

Method 2: Manual Cell Highlighting with Custom CSS

To highlight individual cells, you can manually add a CSS class directly to a cell's content using the Advanced Editor.

Step-by-Step:

  1. Edit your table.
  2. Click on the cell you want to highlight to open the editor.
  3. Switch to the "Text" tab (HTML view).
  4. Wrap your cell content in a span with a custom class. For example: <span class="highlight-red">Closed</span>
  5. Add your custom CSS to the "Custom CSS" box in TablePress's Plugin Options.

Example CSS:

.highlight-red {
    background-color: #ffdddd;
    font-weight: bold;
    color: #ff0000;
}
.highlight-green {
    background-color: #ddffdd;
    font-weight: bold;
    color: #008000;
}

Method 3: Using JavaScript for Dynamic Highlighting

For more advanced control, such as highlighting rows that contain a link or adding a pointer cursor, you can use JavaScript/jQuery.

Example: Highlight and Style Clickable Rows

This code adds a CSS class to any row that contains a link, making it appear clickable.

jQuery(document).ready(function($){
  $('.tablepress-id-1 tr').each(function() {
    if ( $(this).find('a').length ) {
      $(this).addClass('has-link');
    }
  });
});

Corresponding CSS:

.tablepress-id-1 tr.has-link {
    background-color: #e6f7ff !important; /* Light blue background */
    cursor: pointer !important; /* Change cursor to a hand */
}

Remember to change the .tablepress-id-1 selector to match your specific table's ID.

Common Issues and Troubleshooting

  • Specificity Problems: If your CSS isn't applying, your selector may not be specific enough. Use more specific selectors like .tablepress-id-3 .row-4 td and use the !important rule if necessary.
  • Special Characters: Highlighting values with decimals (0.0) or symbols (100%) can sometimes be tricky. Ensure your CSS classes are named correctly and match the value exactly.
  • Multiple Columns: The free version's highlight_columns parameter typically only supports one column. To highlight multiple specific columns, you would need to use custom CSS targeting each column, for example: .tablepress-id-5 .column-2, .tablepress-id-5 .column-4, .tablepress-id-5 .column-7.

When to Consider Premium Features

Based on the sample threads, the TablePress team's premium modules offer more advanced functionality for complex scenarios, such as:

  • The Row Filtering module for highlighting based on text in a specific column.
  • The Cell Highlighting module for automatically coloring cells based on their dynamic values (e.g., turning a cell red if it contains "Closed").

For assistance with these premium features, users are typically directed to contact support via the email address found on the "About" screen within the TablePress Pro plugin on their site, as per the WordPress.org forum guidelines.

By combining these shortcode parameters, CSS, and JavaScript techniques, you can effectively highlight and style your TablePress tables to meet a wide variety of design and functional needs.

Related Support Threads Support