Unanswered

Compose an Html table

(0) Share

Report

Posted on by MIA27

I am using the below code, to compose the html table, which is working fine but the alignments, Format of number table is not proper (like I want them to align right etc., total to have 30,500.00, All the number to be on the right aligned, all the text to be left, the date column to be center aligned.)

Please guide a html code to get the output as mentioned above.

replace(replace(body('Create_HTML_table'),'<table>','<table border="3" style="font-style:normal;font-family:calibri;color:black;background-color: rgb(255,255,255);font-size:14px">') ,'<th>','<th style="color:white;background-color:rgb(46,117,182)">')

All responses (5)

Answers (0)

Anil_g 668 Super User 2025 Season 1 on at

Like (0)

Report

Re: Compose an Html table

@MIA27

Dont use create html table..rather use apply for each and create the table as you need

a Sample is here

at start use initialize variable with - <Table border="1"><thead style="color:white;background-color:rgb(46,117,182)"><tr><th>Col1</th><th>Col2</th></thead>
Then use apply for each and loop on table ..inside loop use append to string and select the variable and in expression use like this -
concat('<tr><td style="text-align:center;">',items('Apply_to_each_2')?['Column1'],'</td><tdstyle="text-align:left;">',items('Apply_to_each_2')?['Column3'],'</td></tr>')
then after apply for each use another append and append the end table tag <\table>

Note: This is sample ..you can use same logic to create your own

You change very styling as you need and compose

cheers
MIA27 on at

Like (0)

Report

Re: Compose an Html table

Below are the outputs I took as below form run history:

From:

{
"body": "<table><thead><tr><th>Customer</th><th>Model</th><th>RecoNo</th><th>SerialNo</th><th>SvcDate</th><th>SvcExpense</th><th>SvcRemarks</th><th>SvcSMR</th></tr></thead><tbody><tr><td>AJLSL</td><td>HM400</td><td>7048</td><td>8651</td><td>26-02-2024</td><td>4500</td><td>18000 HRS SVC ADJUSTED JC. 2-25797 KN(OS01) MAIL DT. 26/02/2024</td><td></td></tr><tr><td>AJLSL</td><td>HM400</td><td>6932</td><td>8651</td><td>08-02-2024</td><td>2500</td><td>17500 HRS SVC ADJUSTED JC. 2-25607 KN(OS01) MAIL DT. 01/02/2024</td><td>17550</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6771</td><td>8651</td><td>15-01-2024</td><td>3500</td><td>17000 HRS SVC ADJUSTED JC. 25486 KN(OS01) MAIL DT. 08/01/2024</td><td>17059</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6603</td><td>8651</td><td>21-12-2023</td><td>2500</td><td>16500 HRS SVC ADJUSTED JC. 25451 KN(OS01) MAIL DT. 17/12/2023</td><td>16528</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6316</td><td>8651</td><td>03-11-2023</td><td>4500</td><td>16000 HRS SVC ADJUSTED JC. 25307 KN(OS01) MAIL DT. 03/11/2023</td><td>16035</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6126</td><td>8651</td><td>15-10-2023</td><td>2500</td><td>15500 HRS SVC ADJUSTED JC. 25236 KN(OS01) MAIL DT. 10/10/2023</td><td>15519</td></tr><tr><td>AJLSL</td><td>HM400</td><td>5938</td><td>8651</td><td>22-09-2023</td><td>3500</td><td>15000 HRS SVC ADJUSTED JC. 25197 KN(OS01) MAIL DT. 17/09/2023</td><td>15028</td></tr><tr><td>AJLSL</td><td>HM400</td><td>5753</td><td>8651</td><td>30-08-2023</td><td>2500</td><td>14500 HRS SVC ADJUSTED JC. 25137 KN(OS01) MAIL DT. 25/08/2023</td><td>14521</td></tr><tr><td>AJLSL</td><td>HM400</td><td>5607</td><td>8651</td><td>10-08-2023</td><td>4500</td><td>14000 HRS SVC ADJUSTED JC. 25019 KN(OS01) MAIL DT. 04/08/2023</td><td>14074</td></tr><tr><td></td><td>Total</td><td></td><td></td><td></td><td>30500</td><td></td><td></td></tr></tbody></table>"
}

==========================
In the body under it , below code

<table><thead><tr><th>Customer</th><th>Model</th><th>RecoNo</th><th>SerialNo</th><th>SvcDate</th><th>SvcExpense</th><th>SvcRemarks</th><th>SvcSMR</th></tr></thead><tbody><tr><td>AJLSL</td><td>HM400</td><td>7048</td><td>8651</td><td>26-02-2024</td><td>4500</td><td>18000 HRS SVC ADJUSTED JC. 2-25797 KN(OS01) MAIL DT. 26/02/2024</td><td></td></tr><tr><td>AJLSL</td><td>HM400</td><td>6932</td><td>8651</td><td>08-02-2024</td><td>2500</td><td>17500 HRS SVC ADJUSTED JC. 2-25607 KN(OS01) MAIL DT. 01/02/2024</td><td>17550</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6771</td><td>8651</td><td>15-01-2024</td><td>3500</td><td>17000 HRS SVC ADJUSTED JC. 25486 KN(OS01) MAIL DT. 08/01/2024</td><td>17059</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6603</td><td>8651</td><td>21-12-2023</td><td>2500</td><td>16500 HRS SVC ADJUSTED JC. 25451 KN(OS01) MAIL DT. 17/12/2023</td><td>16528</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6316</td><td>8651</td><td>03-11-2023</td><td>4500</td><td>16000 HRS SVC ADJUSTED JC. 25307 KN(OS01) MAIL DT. 03/11/2023</td><td>16035</td></tr><tr><td>AJLSL</td><td>HM400</td><td>6126</td><td>8651</td><td>15-10-2023</td><td>2500</td><td>15500 HRS SVC ADJUSTED JC. 25236 KN(OS01) MAIL DT. 10/10/2023</td><td>15519</td></tr><tr><td>AJLSL</td><td>HM400</td><td>5938</td><td>8651</td><td>22-09-2023</td><td>3500</td><td>15000 HRS SVC ADJUSTED JC. 25197 KN(OS01) MAIL DT. 17/09/2023</td><td>15028</td></tr><tr><td>AJLSL</td><td>HM400</td><td>5753</td><td>8651</td><td>30-08-2023</td><td>2500</td><td>14500 HRS SVC ADJUSTED JC. 25137 KN(OS01) MAIL DT. 25/08/2023</td><td>14521</td></tr><tr><td>AJLSL</td><td>HM400</td><td>5607</td><td>8651</td><td>10-08-2023</td><td>4500</td><td>14000 HRS SVC ADJUSTED JC. 25019 KN(OS01) MAIL DT. 04/08/2023</td><td>14074</td></tr><tr><td></td><td>Total</td><td></td><td></td><td></td><td>30500</td><td></td><td></td></tr></tbody></table>

==================================

As mentioned my first post and with images, that In compose I am using the below:
I wrote the below expression in the compose
replace(replace(body('Create_HTML_table'),'<table>','<table border="3" style="font-style:normal;font-family:calibri;color:black;background-color: rgb(255,255,255);font-size:14px">') ,'<th>','<th style="color:white;background-color:rgb(46,117,182)">')

Note: This is getting triggered from Power app application.
Anil_g 668 Super User 2025 Season 1 on at

Like (0)

Report

Re: Compose an Html table

@MIA27

Go to run history and copy the actual output of create html table..from that html code we can check where and what to replace for each alignment..as it is different for each column each td might need to be manipulated differently

Also you might need to loop through the created table and perform replace inside the loop based on the column you are getting..direct replace in one function might not work for your case

cheers
MIA27 on at

Like (0)

Report

Re: Compose an Html table

I already mentioned above in my first post. Below is the only HTML code I am using to compose.
which brings the result as shown earlier.

replace(replace(body('Create_HTML_table'),'<table>','<table border="3" style="font-style:normal;font-family:calibri;color:black;background-color: rgb(255,255,255);font-size:14px">') ,'<th>','<th style="color:white;background-color:rgb(46,117,182)">')

Below is image of my complete flow.
Kindly check and advise, how to improve the output as required
v-yetonggu-msft on at

Like (0)

Report

Re: Compose an Html table

Hi @MIA27 ,

Could you please copy the original html code for me?

Thank you.

Best Regards,

Sunshine Gu