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
How to style an HTML table in Power Automate
When you use the Create HTML table action in Power Automate (often fed from a "Get items" SharePoint action), it outputs a very basic, unstyled HTML table. It lacks borders, padding, and alternating row colors, making it hard to read when sent in an email or Teams message.
Steps to apply this CSS:
- Add a Compose action immediately after your "Create HTML table" action.
- Paste the
<style>block generated by this tool into that Compose action. - In your "Send an email (V2)" or "Post message in a chat or channel" action, insert the output of the Compose action (the CSS) first, followed immediately by the output of the Create HTML table action.
When the email client or Teams renders the message, the browser engine will read your <style> tags and format the table exactly as it appears in the live preview above.
</> icon) when pasting raw HTML into Outlook email actions, or just use dynamic content mapping to insert the Compose output.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 strips <style> tags from emails. You must use inline CSS instead: add styles directly to each HTML element using the style="..." attribute. This tool generates inline-compatible CSS that works in all email clients.
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. Use the CSS tr:nth-child(even) { background-color: #f8f9fa; } selector. For inline CSS (Outlook-compatible), this tool generates the alternating styles directly on each row element.
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.