How to dynamically change color, width, and style of cell borders in Outlook table

Change the color of cells borders

To show you how the borders’ painting works, I’ll use the same samples from the last week's tutorial. The case is the following: I paste a template and choose the discount rate to fill in the table. Depending on my choice, the cell’s borders will be colored in the particular color.

The table I’ll be coloring today would be the one below:

As conditional formatting is handled in templates’ HTML, let’s open this table’s HTML code first:

1. Open the template of interest and hit Edit:
   
2. Find the View HTML icon (< >) on the template’s toolbar:
   
3. See the original HTML that will be modified multiple times:
   

If you wonder about the colors and their connection with discount rates, I’ll give you a hint :) Dataset! Have no idea what it is? Then take a small pause and read my Fillable Outlook templates tutorial first.

Here is the original dataset I’ll use at the beginning and improve a little in a few chapters:

When I need to retrieve the necessary color code from this table, I’ll use the following macro:

As we have all the basics covered, let’s start changing colors :)

Change border width

Now let’s try updating not only border color but also its width. Take one more look at the HTML attribute that replaces the original one when pasting:

See the 1px parameter? This is the width of the borders to be colored. You may manually change it to, say, 2 and the table borders will become wider once you paste it.

However, I’ll do it another way. I’ll update my dataset and add a new column with borders width. In this case, once I choose a present rate to paste, both color and width will be updated.

Now let’s modify the second attribute of each line and replace 1px with the following piece of text:

Then I repeat it for all the three cells of the second row and get the following HTML in the result:

Once this template is saved and pasted, the widen blue borders will appear in an email:

Modify borders style in a table

In this chapter I’d like to draw your attention to another parameter – style. This one will handle the borders appearance. Before I show you how to apply it correctly, I’ll need to get back to my dataset and modify it in accordance with my current case.

I’ve associated each discount rate with a border style and saved this dataset for the future. The macro to retrieve the style for my HTML would be the one below:

Now I’ll need to update the second row’s attributes by replacing solid (the default style I’ve been using all along) with the macro above to get the following piece of code:

Here goes the final HTML:

If you copy this HTML and paste to your templates, the result won’t keep you waiting:

Set up conditional formatting to change highlighting, text color, and borders width at the same time

We’ve reached the most interesting part as I’m about to show you how to apply multiple modifications at a time. First off, I’ll update the dataset I’ll be retrieving the data from. Since I decided to change the cells’ highlighting, text color and borders width, all those parameters need to be specified. Hence, my new dataset would look like that:

So, if I choose 10%, the necessary text will be painted in blue (#00B0F0), the background of the chosen cells will be shaded in a light blue tone (#DEEBF6) and their borders will be widened twice.

But how this dataset can be connected to an Outlook table so that it gets formatted? I’ve been preparing you for this task in 2 articles :) Here goes the HTML that will handle all the necessary modifications:

Now let’s have a look at all the modifications applied:

• <span data-set-style="color:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code',title:'Select discount'}]">Sample header 1</span> - this piece will paint the header text in color from the “Color code” column. In case you feel like you need to refresh your memory on the text painting, refer to the Change the font color of text in table chapter of my previous tutorial.
• data-set-style="background-color:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Background code',title:'Select discount'}] - this part updates the background color, taking its code from the Background code column of the dataset. Feel free to have a look at the Highlight cells tutorial if you feel like you need a more detailed description of this case.
• data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}] – with this HTML line borders’ width will be changed to the one specified in the Border width I’ve got it covered in earlier, you may have a look in case you missed something.

When I paste a template with those attributes added, the result won’t keep me waiting:

There is a small note I’d like to make before closing this topic. While I was testing borders coloring in tables I faced quite ambiguous behavior of borders in both online and desktop versions of Outlook. Being a little bit confused, I reached our developers for clarification. They found out that different Outlook clients render tables in different ways and the reason for such behavior is a bug in Outlook.

Our team reported this issue to Microsoft team, feel free to check out their response in this GitHub conversation :)

Final note

I really hope I managed to convince you that a table in Outlook is not just black borders with plain text. There is plenty of room for improvement and creativity :)

When you decide to take a few painting experiments of your own, just install Shared Email Templates from Microsoft AppSource and enjoy!