How to use conditional formatting in Outlook tables

Color all text in table cell

First off, I open the HTML code of my template and check it out carefully:

Here is how my template looks in HTML:

Let’s have a super-close look at the HTML above. The first line is the table border’s properties (style, width, color, etc.). Then goes the first row <tr> (3 table data cell elements <td> for 3 columns) with their attributes. Then we see the code of the second row.

I am interested in the first element of the second row with my WHAT_TO_ENTER. The coloring will be done by adding the following piece of code:

I’ll break it into pieces for you and clarify each of them:

• The COLOR parameter handles the painting. If you replace it with, let’s say, “red”, this text will become red. However, as my task is to choose a color from dropdown list, I’ll get back to the preparation for a second and take my prepared WhatToEnter macro from there: ~%WhatToEnter[{dataset:'Dataset with discounts',column:’Discount’,title: Select discount'}]
• TEXT_TO_BE_COLORED is the text that needs to be shaded. In my particular example, it would be “~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] discount” (copy this piece right from the original HTML code to avoid data corruption).

Here is the new piece of code I’ll insert in my HTML:

A new question arises – what place of the HTML should I place it in? Speaking generally, this text should replace TEXT_TO_BE_COLORED. In my sample, it would be the first column (<td>) of the second row (column). So, I replace the WTE macro and the word “discount” with the code above and get the following HTML:

Once I save the changes and paste this updated template, a pop-up window will ask me to choose a discount. I pick 10% and my text gets colored in green right away.

Shade part of cell’s content

The logic for coloring only a part of the cell’s content is basically the same – you replace only the to-be-tinted text with the code from the previous chapter leaving the rest of the text as is.

In this example, if I need to color only the percentage (without the word “discount”), I’ll open the HTML code, select the part that does not need to be colored ("discount" in our case) and move it out of the <span> tag:

In case you are doing the coloring preparations from the very beginning, just keep in mind that the future-colored text goes in place of TEXT_TO_BE_COLORED, the rest stays after the ending </span>. Here is my renewed HTML:

See? I’ve placed just part of my cell’s content within the <span> tags, hence only this part will be colored when pasting.

Highlight one cell

As I’m modifying the same table, I won’t repeat myself and paste the HTML code of the original table in this chapter as well. Scroll up a little or jump right to the first example of this tutorial to see the unchanged code of the uncolored table.

If I want to shade the background of the cell with the discount, I’ll also need to modify the HTML a little, but the modification will differ from the text coloring. The main difference is that the color should be applied not to the text but to the entire cell.

The to-be-highlighted cell looks like that in the HTML format:

As I want to highlight a cell, the changes should be applied to the cell attribute, not to text. I’ll break the line above in parts, clarify each of them and point to the parts that need to be changed:

• “style=” means that the row’s cell has the following style properties. This is where we take our first break. As I am to set a custom background color, I change style to data-set-style.
• "width: 32.2925%; border: 1px solid black;" – those are the default style properties I meant above. I need to add another one to customize the background of the chosen cell: background-color. Since my goal is to choose the color to use from a dropdown list, I get back to my preparation and take the ready WhatToEnter from there.

• “~%WhatToEnter[] discount” is the cell’s content.

So, here is the updated HTML looks:

The rest of the table stays as is. Here goes the resulting HTML that’ll highlight the cell with the percentage rate:

When I save this change and paste the updated table in an email, I’ll get the dropdown list with discounts and the first cell will be highlighted as planned.

Color entire row

When one cell is not enough, I paint the entire row :) You may think that you’ll need to apply the steps from the section above for all the cells in a row. I’ll rush to disappoint you, the procedure will differ a little.

In the instructions above I’ve showed you how to update the cell’s background modifying this cell’s HTML piece. Since now I’m about to repaint the entire row, I’ll need to take its HTML line and apply changes right to it.

Now it is options-free and looks like <tr>. I’ll need to add data-set-style= and paste my WHAT_TO_ENTER over there. In the result, the line will look like the one below:

Thus, the whole HTML of the table with to-be-painted cell will look like this:

Feel free to copy this HTML for your own templates to make sure it works the way I describe. Alternatively, trust the screenshot below :)