{"id":2232,"date":"2021-12-25T07:28:23","date_gmt":"2021-12-25T07:28:23","guid":{"rendered":"https:\/\/365stack.in\/?p=2232"},"modified":"2021-12-25T07:28:26","modified_gmt":"2021-12-25T07:28:26","slug":"how-to-style-html-table-in-power-automate","status":"publish","type":"post","link":"https:\/\/365stack.in\/index.php\/2021\/12\/25\/how-to-style-html-table-in-power-automate\/","title":{"rendered":"How to style HTML table in Power Automate"},"content":{"rendered":"\n<p>In Power Automate, we use <strong>Create HTML Table<\/strong> action to create a dynamic table but this action lacks formatting\/styling options. <\/p>\n\n\n\n<p>In this post we&#8217;re going to see formatting the table created by power automate using CSS.  Here is the sample example of Create HTML table&#8217;s output and it does not have any table styling.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2233\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/how-to-style-html-table-in-power-automate\/screenshot-2021-12-25-122129\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122129.png?fit=291%2C157&amp;ssl=1?v=1640415223\" data-orig-size=\"291,157\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot-2021-12-25-122129\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122129.png?fit=291%2C157&amp;ssl=1?v=1640415223\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122129.png?fit=291%2C157&amp;ssl=1?v=1640415223\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122129.png?resize=245%2C132&#038;ssl=1\" alt=\"\" class=\"wp-image-2233\" width=\"245\" height=\"132\" data-recalc-dims=\"1\" \/><figcaption>Output of Create HTML Table<\/figcaption><\/figure><\/div>\n\n\n\n<p>Power Automate generates HTML code that can be easily modified or styled with help of CSS.  Add a compose action as next step to Create HTML table action and enter below CSS to the compose action.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\ntable {\n  border: 1px solid black;\n  width: 100%;\n  text-align: left;\n  border-collapse: collapse;\n}\n\ntable th {\n  border: 1px solid black;\n  background-color: #0066cc;\n  color:white;\n  border-collapse: collapse;\n  padding: 5px;\n}\ntable td {\n  border: 1px solid black;\n  background-color: #EEEEEE;\n  border-collapse: collapse;\n  padding: 5px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Add outputs of the compose and Create HTML table actions to Send Email<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"485\" data-attachment-id=\"2238\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/how-to-style-html-table-in-power-automate\/screenshot-2021-12-25-123857-3\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-123857-3.png?fit=762%2C577&amp;ssl=1?v=1640416826\" data-orig-size=\"762,577\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot-2021-12-25-123857-3\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-123857-3.png?fit=300%2C227&amp;ssl=1?v=1640416826\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-123857-3.png?fit=640%2C485&amp;ssl=1?v=1640416826\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-123857-3.png?resize=640%2C485&#038;ssl=1\" alt=\"\" class=\"wp-image-2238\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-123857-3.png?w=762&amp;ssl=1 762w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-123857-3.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n\n\n\n<p>Here is the formatted table and we can customize our html table \/ html code as per easy to complex requirements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"139\" data-attachment-id=\"2234\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/how-to-style-html-table-in-power-automate\/screenshot-2021-12-25-122213\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213.png?fit=1028%2C223&amp;ssl=1?v=1640416047\" data-orig-size=\"1028,223\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot-2021-12-25-122213\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213.png?fit=300%2C65&amp;ssl=1?v=1640416047\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213.png?fit=640%2C139&amp;ssl=1?v=1640416047\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213-1024x222.png?resize=640%2C139&#038;ssl=1\" alt=\"\" class=\"wp-image-2234\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213.png?w=300&amp;ssl=1 300w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213.png?w=768&amp;ssl=1 768w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-122213.png?w=1028&amp;ssl=1 1028w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><figcaption>Formatted HTML Table<\/figcaption><\/figure>\n\n\n\n<p> Please post your queries in the comments section. Happy Building \ud83d\ude42 <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Power Automate, we use Create HTML Table action to create a dynamic table but this action lacks formatting\/styling options. In this post we&#8217;re going to see formatting the table created by power automate using CSS. Here is the sample example of Create HTML table&#8217;s output and it does not have any table styling. Power Automate generates HTML code that [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":2238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[8,32],"tags":[84,82,83,33,9,10],"class_list":["post-2232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-power-automate","category-power-platform","tag-css","tag-html","tag-html-style","tag-power-platform","tag-powerapps","tag-powerautomate"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-25-123857-3.png?fit=762%2C577&ssl=1?v=1640416826","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1456,"url":"https:\/\/365stack.in\/index.php\/2021\/09\/17\/powerapps-print-form-to-pdf\/","url_meta":{"origin":2232,"position":0},"title":"How to Print Scrollable Screen to PDF in PowerApps","author":"Hemanthkumar Rajan","date":"September 17, 2021","format":false,"excerpt":"One of the common requirements in any application is to print the data either to save the form as PDF or print the form. PowerApps provides Print() function to print the screen in a printable format, but the limitation is the screen height cannot be greater than 2164px. If a\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2020\/10\/background1.jpg?fit=1200%2C675&ssl=1%3Fv%3D1623349406&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1636,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/29\/how-to-add-rows-in-excel-online-using-power-automate\/","url_meta":{"origin":2232,"position":1},"title":"How to add rows in Excel online using Power Automate","author":"Hemanthkumar Rajan","date":"November 29, 2021","format":false,"excerpt":"Adding rows to an excel file or exporting the data in \".xlsx\" format, which can be sent to users or other applications as data feed can be a common scenario. In this example, we used the \"Excel online business\" connector to add rows to the excel file, Previously we already\u2026","rel":"","context":"In &quot;Power Automate&quot;","block_context":{"text":"Power Automate","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/power-automate\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-214.png?fit=997%2C551&ssl=1%3Fv%3D1637930822&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2498,"url":"https:\/\/365stack.in\/index.php\/2023\/11\/24\/notify-applications-certificates-secrets-power-automate\/","url_meta":{"origin":2232,"position":2},"title":"Notify Application&#8217;s Certificates &#038; secrets &#8211; Power Automate","author":"Kanagaraj Neelamegan","date":"November 24, 2023","format":false,"excerpt":"Notify in teams\/outlook about Application's Certificates & secrets using Power Automate. Initialized variable of array type to store application data. Add list applications and owners action from Azure AD app registration connector. Loop each value listed down from the list applications and owner action. Here the value is referred from\u2026","rel":"","context":"In &quot;Azure&quot;","block_context":{"text":"Azure","link":"https:\/\/365stack.in\/index.php\/category\/azure\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2023\/11\/image-14.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1678,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/27\/how-to-add-microsoft-forms-responses-to-database\/","url_meta":{"origin":2232,"position":3},"title":"How to add Microsoft Forms responses to database","author":"Premkumar Perumal","date":"November 27, 2021","format":false,"excerpt":"Add Microsoft Forms responses to databases using power automate will help any person\/organization to do advanced data analytics on the responses. We can add responses to list or table using Power Automate in two different ways and create your survey using Microsoft Form as a first step. Method 1: After\u2026","rel":"","context":"In &quot;Power Automate&quot;","block_context":{"text":"Power Automate","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/power-automate\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-26-214110.png?fit=682%2C325&ssl=1%3Fv%3D1637943130&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1640,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/03\/how-to-create-csv-file-in-power-automate\/","url_meta":{"origin":2232,"position":4},"title":"How to create CSV file in Power Automate","author":"Hemanthkumar Rajan","date":"December 3, 2021","format":false,"excerpt":"Export to CSV is one of the common requirements in any application. But in this example, we are not going to show the procedure from the app that will be shared in a separate post. Here we are getting the data from Power Automate itself to support a large set\u2026","rel":"","context":"In &quot;Power Automate&quot;","block_context":{"text":"Power Automate","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/power-automate\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-229.png?fit=934%2C596&ssl=1%3Fv%3D1637940499&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1642,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/05\/how-to-read-csv-file-using-power-automate\/","url_meta":{"origin":2232,"position":5},"title":"How to read CSV file using Power Automate","author":"Hemanthkumar Rajan","date":"December 5, 2021","format":false,"excerpt":"We will see how to read CSV files using Power Automate and already a post is published to create a CSV file using power automate. This is one of the mandatory use cases in the Office 365 environment, either we will get the data from Email or from an external\u2026","rel":"","context":"In &quot;Power Automate&quot;","block_context":{"text":"Power Automate","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/power-automate\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-248.png?fit=1013%2C657&ssl=1%3Fv%3D1638546782&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/comments?post=2232"}],"version-history":[{"count":4,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2232\/revisions"}],"predecessor-version":[{"id":2242,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2232\/revisions\/2242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media\/2238"}],"wp:attachment":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media?parent=2232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/categories?post=2232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/tags?post=2232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}