Power Automate HTML Table Styler
Visual CSS generator for styling the output of the "Create HTML table" action in Power Automate. Customize colors, fonts, and borders, then copy the raw <style> block straight into your email flow.
Styling Options
Live Preview
| ID | Title | Status | Owner | Priority |
|---|---|---|---|---|
| 1 | Server Migration | In Progress | Rizwan | High |
| 2 | Update SSL Certificates | Pending | Alice | Medium |
| 3 | Renew Domain Names | Completed | Bob | Low |
| 4 | Database Backup Configuration | In Progress | Rizwan | High |
Generated CSS
Why Power Automate tables look broken in email
The Create HTML table action produces a correct but entirely unstyled <table>— no borders, no padding, no header treatment. Dropping that straight into a Send an email action is why flow notifications look like a 1998 intranet. The fix is to inject styling into the generated markup before sending it, which is what the generator above produces.
Outlook renders HTML with Word, not a browser
This is the constraint everything else follows from. Outlook on Windows uses the Word rendering engine for HTML mail, and it supports far less than a browser does. In practice:
- Inline styles only. A
<style>block or a CSS class is unreliable and frequently dropped altogether. Every rule belongs in astyleattribute on the element it affects. - No flexbox or grid, and no CSS positioning worth relying on. Tables are the layout mechanism, which is the one situation where that is still the right answer.
- Use
border-collapse: collapseand put borders on cells, not on the table, or you get doubled and uneven lines. - Prefer percentage widths for the table and fixed padding on cells. Pixel table widths break on mobile Outlook and in the reading pane.
Injecting the styles
The usual technique is a replace() expression over the Create HTML table output, swapping the bare <table> tag for one carrying a style attribute, and doing the same for <th> and <td>. It is string surgery rather than templating, so keep the replacements narrow — matching on <table> exactly, not on a substring that also appears in your data.
When you need per-row colouring, stop using Create HTML table
Conditional formatting per row is the point at which the action stops helping, because its output has no hooks to target a single row. The alternative is to build the HTML yourself: a Select action that maps each record to a <tr> string with the colour already decided, then join() to concatenate them into a table body. It is more work up front and far less fragile than trying to post-process the generated table.
Dark mode will recolour your table
Outlook's dark mode inverts backgrounds, and it does so unevenly — a table with white cell backgrounds and unset text colour can end up with white text on white. Set color explicitly wherever you set background-color, and test in dark mode before rolling a flow out, because it affects a large share of mobile readers.
Frequently Asked Questions
The "Create HTML table" action outputs unstyled HTML. Add a Compose action before it containing your CSS wrapped in <style> tags. Then in your email body, concatenate: concat(outputs('CSS_Compose'), body('Create_HTML_table')).
Outlook on Windows renders HTML mail with the Word engine and drops <style> blocks, so a table styled that way arrives plain there. This tool outputs a <style> block, which works in Outlook on the web, Gmail and Apple Mail. For Outlook desktop you need to move each rule into a style="..." attribute on the element it affects; the tool does not inline the CSS for you, so run its output through a CSS inliner or add the attributes in the flow.
Yes, but not through CSS alone. Use an Apply to Each loop to iterate over rows, add a Condition action to check values, and dynamically inject different style="" attributes (e.g., red background for overdue items). This tool gives you the base CSS to start from.
Yes. The most common pattern is: (1) "Get items" from a SharePoint list, (2) "Select" the columns you want, (3) "Create HTML table" from the selection, (4) Prepend CSS, (5) "Send an email" with the styled table in the body.
Email clients have limited CSS support. For mobile-friendly tables, set width: 100% on the table, use word-wrap: break-word on cells, and keep the number of columns to 5 or fewer. Outlook on mobile automatically stacks tables that are too wide.
Yes. The generated block uses the tr:nth-child(even) { background-color: #f8f9fa; } selector when you enable striped rows. Note that Outlook desktop ignores nth-child, so for that client the alternating colour has to be set on each row with a style attribute, which this tool does not do.
No. This generator lets you pick colors, borders, fonts, padding, and alignment visually using a point-and-click interface. It outputs the exact CSS string you need to copy and paste into your Power Automate Compose action.