4 Ways to Spruce up Your Notification Tables

Simple and effective! Thanks, @Austen Brown, I'll be using this.

@Austen Brown does this work for us Gmail users out there? Last time I remember trying it did not work?

Dan, CSS support can be flakey across different email clients, but most support simple CSS styling. Gmail says they support CSS in emails, but ultimately it's going to depend on which CSS properties you use, and whether those specific properties are supported by the specific email client you're sending to.

The general rule of thumb is to keep your CSS as simple as possible, have a decent fallback in case the email client doesn't support one of your properties, and only use inline CSS (Austen's example here is inline).

@Dan Snyder, I finally got around to using this table formatting method in a flow today, and learned a few things. The HTML Table tool that Austen links to provides CSS that is intended to apply only to table elements of a specific class. But because the table HTML generated by Power Automate does not have any classes assigned, Gmail (or any other email client) will not apply the CSS to your HTML table.

The easiest way to fix this is to use the replace() function to add the class to your table element. Luckily, the site Austen linked to just applies the class to the table tag, so you only have to replace one thing. In the CSS, look towards the top where it will say something like this:

table.minimalistBlack {

This means that your table element needs to be part of the minimalistBlack class. You can add that to your table HTML with a replace() function like this:

replace(outputs('Compose'),'<table>', '<table class="minimalistBlack">')

Of course, change “outputs('Compose')” to whatever action output contains your table HTML.

Once I did this, the table formatting was applied in gmail and the other email clients I tested.

@Ben Regier
Can you help me with this? Feel like I am missing one thing… The first ‘replace’ just cleans up the table…replace(replace(body('Create_HTML_Table'), '<', '<'), '>', '>')…while the second ‘replace’ makes the changes you suggest…replace(outputs('Clean_Up_HTML'),'<table>', '<table class="greenTable">'). What am I missing? Thanks

Bob

10009d2476bf66f490c6d7284fb71661-huge-im

@Bob Rickards and @Ben Regier I am getting the same result and I even put all the replace items in one compose and still no formatting?

@Dan Snyder, @Bob Rickards

Have you checked the outputs of your compose action to be sure that the class is being added to the table tag?

Also double check that your email is using the output from the right action.

@Ben Regier @Dan Snyder

Yep…here is the output:

dea9e71052e924ebc7be98dcd065bb36-huge-im

And I checked the email and I am selecting the right output.

Thanks again for helping.

Bob

@Bob Rickards
I don't see any style tags or CSS in the output. Are you adding that somewhere else?

@Ben Regier
Yes..I create the table, clean up the table, add the class and the add the CSS style. Is this the wrong order?

ce0ca1c87a383d4bcf30fe82bf474e8e-huge-im

@Bob Rickards

Order should be fine as long as everything is getting passed to the Send email action.

When you created your Send Email action, did you change to Code View before inserting your dynamic content? The code view button looks like this:

ad5e60dfbd3150b52c8def7762c80de3-huge-co

Click that button, delete any HTML tags that you find there, and then insert the dynamic content that contains your CSS and HTML code. Run a test, and view the results of the Send Email action to make sure the style tags, CSS, and HTML tags with the proper table class are coming through.

628bb032204e21e168a630c5a3314b28-huge-co

This is working in my tests.

@Ben Regier Would it be possible to share your test flow with us? I have tried many different iterations and have gotten the code in as I believe you outlined here, but still not getting a formatted table?

Could it have something to do with the links?

@Ben Regier @Dan Snyder

Yeah…I have checked everything and even rechecked and it is still not working. It has to be one of my compose statements is not working. Can you share your test flow?

@Bob Rickards, @Dan Snyder

I think it would be easier to troubleshoot if I can see the code in the body of the message that Gmail is sending out. The flow I'm using is quite different from Austen's example, but as long as the HTML and CSS are communicating the concept should be the same.

If you are willing, please go into your run history and copy everything in the Body field of your Gmail “Send email” action. Remove any confidential information and then either paste the code here, or send it to me directly.

6454215ab6fa50fe78dcb329e334587b-huge-co

@Ben Regier @Dan Snyder

Nothing secretive about what I am sending….

<table class="blueTable"><thead><tr><th>Donor</th><th>Address</th><th>Gift Type</th><th>Amount</th><th>Fund</th><th>Soft Credit</th></tr></thead><tbody><tr><td>Mr. Xxxxxxxxx</td><td> |411 XXXXXXXXX- Wilmette - IL - 60091-2363| </td><td>| Donation</td><td> | $80.00</td><td>| Athletics - Women's Soccer Fund</td><td>| </td></tr></tbody></table>

<br>
We are fortunate to know this process will allow our donors to hear from faculty, staff, and/or students that their gift makes a difference!<br>
<strong>REMINDER…these funds need to be spent during the current fiscal year.<br>
</strong><br>
If you have any questions please contact me at x3294.<br>
<br>
Thank you!<br>
Amanda Beck<br>
Stewardship and Engagement Manager</p>

@Bob Rickards

Thanks, this is helpful. I ran some tests and was interested to find out that the code you posted will work as expected when sent from Outlook to Gmail, or from Gmail to Outlook. But for some reason, it does NOT work when sent from Gmail to Gmail.

However, there is a solution. If you include <html> and <head> blocks, it will work in Gmail as well. Here's how your code should look: (I removed the “” tag because I don't think it's doing anything.)

<html>
<head>
<style>
table.blueTable {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable tr:nth-child(even) {
background: #D0E4F5;
}
table.blueTable thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
border-left: none;
}

table.blueTable tfoot {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #444444;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
table.blueTable tfoot .links a{
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
</style>
</head>
<table class="blueTable"><thead><tr><th>Donor</th><th>Address</th><th>Gift Type</th><th>Amount</th><th>Fund</th><th>Soft Credit</th></tr></thead><tbody><tr><td>Mr. Xxxxxxxxx</td><td> |411 XXXXXXXXX- Wilmette - IL - 60091-2363| </td><td>| Donation</td><td> | $80.00</td><td>| Athletics - Women's Soccer Fund</td><td>| </td></tr></tbody></table>

<br>
We are fortunate to know this process will allow our donors to hear from faculty, staff, and/or students that their gift makes a difference!<br>
<strong>REMINDER…these funds need to be spent during the current fiscal year.<br>
</strong><br>
If you have any questions please contact me at x3294.<br>
<br>
Thank you!<br>
Amanda Beck<br>
Stewardship and Engagement Manager</p>
</html>

That did it, thanks @Ben Regier!

@Bob Rickards