Cell Highlighting

Add CSS classes to cells for highlighting based on their content.

This feature module is part of the TablePress Premium plans.

Highlighting or, more in general, changing the styling of individual cells is possible using “Custom CSS” code. This can be tedious if the cell that is to be changed often changes. If the cells contains a suitable search term, this can be used to automatically apply the highlighting to matching cells.

By the way: The Row Highlighting feature module allows this for entire rows!

Feature description

In the table below, the goal is to automatically change the styling (here to different background colors with bold font) of all cells that contain the country names “Australia” or “Chile” or the sports “Basketball” or “Golf”:

Name	Year	Country	Sport
Eric	1986	Sweden	Soccer
Julia	1991	Germany	Basketball
Adam	2002	Indonesia	Golf
Kim	1986	Chile	Badminton
Jackson	1998	Australia	Baseball
Cade	1986	India	Badminton
Keaton	2003	Costa Rica	Basketball
Ray	1999	France	Gymnastics
Omar	1984	Brazil	Tennis
Maite	1986	Norway	Wrestling
Jeremy	1987	United States	Fencing
Libby	1989	Austria	Swimming
Kermit	1994	Ukraine	Volleyball
Madison	1988	United States	Boxing
Francis	1993	Chile	Volleyball
Leigh	1988	Austria	Rugby
Caleb	1981	China	Gymnastics
Alexandra	1985	Belgium	Wrestling
Ivana	2000	Italy	Fencing
Craig	1986	Brazil	Athletics
Joshua	1981	South Africa	Gymnastics
Ryder	1981	Brazil	Swimming
Faith	1980	Indonesia	Boxing
Janna	1984	Poland	Table Tennis
Alana	1986	Ukraine	Gymnastics
Wesley	1981	Brazil	Badminton
Ina	1991	United States	Cycling
Amery	2003	China	Soccer
Lavinia	2002	France	Rowing
Maggie	1981	Costa Rica	Skating
Walker	1986	Mexico	Badminton
Barry	1983	United States	Cricket
Cheryl	1982	Chile	Hockey
Eugenia	1991	Italy	Volleyball
Ulla	2006	Netherlands	Baseball
Cynthia	1999	Germany	Soccer
Kyle	1983	Italy	Boxing
Byron	1984	South Africa	Swimming
Matthew	1994	Sweden	Cycling
Claudia	2000	Spain	Rugby

To achieve this, the highlight term was set to

Australia||Chile||Basketball||GolfCode language: plaintext (plaintext)

which contains the || logic operator to allow for searching multiple different terms

Cells that contain one of these search terms get the respective additional CSS class

highlight-australia
highlight-chile
highlight-basketball
highlight-golfCode language: plaintext (plaintext)

where the search term is appended to the string highlight- in lowercase, and (if used) special characters removed.

These CSS classes can be used in CSS code that is added to the “Custom CSS” text area:

.tablepress-id-123 .highlight-australia {
  background-color: #c00000 !important;
  font-weight: bold;
}
.tablepress-id-123 .highlight-chile {
  background-color: #00c000 !important;
  font-weight: bold;
}
.tablepress-id-123 .highlight-basketball {
  background-color: #00c0c0 !important;
  font-weight: bold;
}
.tablepress-id-123 .highlight-golf {
  background-color: #c0c000 !important;
  font-weight: bold;
}Code language: CSS (css)

Usage instructions

To use this feature with your tables, configure the desired options on the table’s “Edit” screen.

Alternatively, configure the desired options in the “Cell Highlighting” section of the “Settings” sidebar of the table’s “TablePress table” block when editing the post or page with the table.

The available settings for the Cell Highlighting module in the "Settings" sidebar of the "TablePress table" block. — The available settings for the Cell Highlighting module in the “Settings” sidebar of the “TablePress table” block.

After this, add the customized CSS code for the desired highlight styling to the “Custom CSS” text area on the “Plugin Options” screen.

Configuration parameters

To configure this module’s features, you can also use these configuration parameters in the “TablePress Table” block or in the Shortcode that you are using to embed the table:

Module	Slug	Configuration parameter	Name	Description	Type	Default value
Cell Highlighting	cell-highlighting	`highlight`	Cell Highlight term	Cells that contain this term will be highlighted. You can combine multiple highlight terms with an OR operator, e.g. `term1\|\|term2` or `term1&&term2`.	string	`""` (empty string)
Cell Highlighting	cell-highlighting	`highlight_full_cell_match`	Full cell matching	If this is `true`, the full cell content has to match the highlight term.	boolean (`true` or `false`)	`false`
Cell Highlighting	cell-highlighting	`highlight_case_sensitive`	Case-sensitive matching	If this is `true`, the case sensitivity of the highlight term has to match the content in the cell.	boolean (`true` or `false`)	`false`
Cell Highlighting	cell-highlighting	`highlight_columns`	Highlight columns	A comma-separated list of the columns which should be searched for the highlight terms, e.g. `1,3-5,7`. By default, all columns will be searched.	string	`""` (empty string) // “” equates to ‘all’.
Cell Highlighting	cell-highlighting	`highlight_url_parameter`	Cell Highlight URL parameter	This allows providing the Cell Highlight term in a URL parameter.	string	`""` (empty string)

On this page