Beginner with CSS Trying to format HTML Table in Flow

[Ninetails]

EDITED:

Hi Everyone,

Let me start by saying I'm a beginner in HTML table and CSS, so please speak plainly with any answers/ solutions :-).  I'm trying to create an HTML table that pulls data from an excel file and then apply CSS for formatting to the table to drop it into an email.  So far I've been able to get the data and convert it into a table.  However, I'm noticing the formatting is horrible and that rows with missing data are not being skipped, so I'm getting holes in my table. 

I'd like to:

-Skip rows that don't have data in the excel file so there are no holes in the HTML table

-add cell spacing

-add cell color

-add borders and collapse them

-how to put into power automate flow and link to HTML table

Not to big of an ask, right? lol

Attached image of the excel file I'm trying to mimic in HTML

[stharris]

A bit of an ask to actually write all of the CSS, but I can help. First, are you familiar with CSS Grid? I think this could be the best solution. Otherwise, you may want to use the old standard of TD= table data, TR = table row. etc.

 "subgrid" | Can I use... Support tables for HTML5, CSS3, etc 

I generally look to W3schools or Mozilla Dev for Html and CSS answers. 

https://www.w3schools.com/css/css_grid.asp ;  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid ; 

you can set the background color of your cels with css as well. I can help you with the html css part

but I can not answer this for you: "how and where to add this text into power automate and have it pull in the values from my excel file and enter"

[ivan_apps · Accepted solution]

Yea I can’t help you mimic a styling, not that good at css myself. However I’ve used this method in my flows as well as the styling and it’s worked out pretty well, looking quite nice. Perhaps this helps you get started with a template and you just modify a couple css tags?

https://ryanmaclean365.com/2020/01/29/power-automate-html-table-styling/

[Ninetails]

Hi @stharris,

I've been using w3schools site to play with the CSS coding.  I guess I was clueless in regards to the specific issue regarding skipping empty rows in my HTML table, is this HTML coding or can it be accomplished with CSS?  Also, how to take the CSS code and put into a power automate flow and link it to the table, which I may have figured out, but still testing.

[stharris]

It will take CSS to skip empty rows. If you need help with CSS I can help. (I did some Frontend Dev for Websites).

"Ivan apps" seems to have a good solution. 

I would be interested in knowing what you come up with. I am new to Power Automate.

[Ninetails]

Hi Ivan,

Your website was immensely helpful and allowed me to get the formatting into the email.  Would you happen to know what code I should use to skip a row if empty in the table?  Thank you!

[Ninetails]

HI @stharris ,

So Ivan's solution worked for the formatting of the table and I was able to get it into power automate.  How would you suggest I alter the below CSS code to remove the empty rows?

Code:

<style>
table {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 70%;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table tbody td {
font-size: 13px;
}
table thead {
background: #E7A107;
border-bottom: 2px solid #444444;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
border-left: none;
}
</style>

[stharris]

for the tr (table row) that you want to be different from the others your html will include:

class = "anyname"

and your CSS will be: 

.anyname {

display: none;

}

[ivan_apps]

Not knowing CSS too well, I would probably filter the data in first in Power Automate before it makes its way into the table. I wouldn’t rely on CSS to hide rows or skip rows but that’s simply because it’s not my strength.

[stharris]

And Ninetails,

Ivan is probably right. It occurred to me later that you may need to identify many rows that are blank and that would best be accomplished with JavaScript rather than CSS. Since Power Automate uses JSON (JavaScript Object Notation) this would be the way to go. As I am new to power automate you may need to ask which expression or function to use to accomplish this. I believe it would require an If statement such that If(rows are empty) apply class of anyname. (note that this is not correct syntax). Or there may be a better way.