Title: How can I highlight certain cells or their content?
Author: Tobias Bäthge
Published: December 2, 2012
Last modified: May 14, 2025

---

Back to: [Frequently Asked Questions](https://tablepress.org/faq/?output_format=md)•
[Documentation](https://tablepress.org/documentation/?output_format=md)

# 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

    ```language-css
    .tablepress-id-N .row-X .column-Y {
    	background-color: #ff0000;
    	color: #ff0000;
    }Code language: CSS (css)
    ```

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

    ```language-xml
    <span class="highlight-1">your first important value</span>
    <span class="highlight-2">your second important value</span>Code language: HTML, XML (xml)
    ```

and could create approriate CSS like

    ```language-css
    .tablepress .highlight-1 {
    	color: #ff0000;
    	text-decoration: underline;
    }
    .tablepress .highlight-2 {
    	color: #00ff00;
    	font-weight: bold;
    }Code language: CSS (css)
    ```

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.

If you would like to changing the styling of rows or cells automatically, based 
on their content, check out the [Row Highlighting](https://tablepress.org/modules/row-highlighting/)
and [Column Highlighting](https://tablepress.org/modules/cell-highlighting/) features
that are part of the [TablePress premium license plans](https://tablepress.org/pricing/).