web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
You're Invited to Keeping It Real with the Power Platform
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / HtmlText for table go ...
Power Apps
Answered

HtmlText for table go wrong?

(0) ShareShare
ReportReport
Posted on by TimmyBoy 997

Hello,

Seems i can't get the table in the html code correct (its inside a htmltext)

Any idea where it going wrong?

 

Head of the table

 

<div style=""margin-bottom: 40px;""><strong> Sold: </strong><br>
	<table class=""td"" cellspacing=""0"" cellpadding=""6"" border=""1"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;"" width=""100%"">
		<thead>
			<tr>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Ref. Code</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Itemname</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Date</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Price</th>
			</tr>
		</thead>
		<tbody>
		
<tr class=""order_item"">" & Concat(temp,
		"<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		'UPC CODE' & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		'ITEM NAME' & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		ENDDATE& 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		PRICE & 
 		"€</td>


	</tr>
	

	
	
		</tbody>

	") & "</table>
 </div>

 

 It looks like this

TimmyBoy_0-1673729887712.png

As you can see after the second price it get stuck together instead going down so we get a nice table.

 

Here is the complete html code:

"<html lang=""nl"">
	<head>
		<meta http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"">
		<title>Test file</title>
	</head>
	<body leftmargin='0' marginwidth=""0"" topmargin=""0"" marginheight=""0"" offset=""0"" style=""padding: 0;"">
		<div id=""wrapper"" dir=""ltr"" style=""background-color: #f7f7f7; margin: 0; padding: 70px 0; width: 100%; -webkit-text-size-adjust: none;"" bgcolor=""#f7f7f7"" width=""100%"">
			<table border=""0"" cellpadding=""0"" cellspacing=""0"" height=""100%"" width=""100%"">
				<tr>
					<td align=""center"" valign=""top"">
						<div id=""template_header_image""></div>
						<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""600"" id=""template_container"" style=""background-color: #fff; border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0,0,0,.1); border-radius: 3px;"" bgcolor=""#fff"">
							<tr>
								<td align=""center"" valign=""top"">
									<!-- Header -->
									<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"" id=""template_header"" style='background-color: #ff8000; color: #fff; border-bottom: 0; font-weight: bold; line-height: 100%; vertical-align: middle; font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; border-radius: 3px 3px 0 0;' bgcolor=""#ff8000"">
										<tr>
											<td id=""header_wrapper"" style=""padding: 36px 48px; display: block;"">
												<h1 style='font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; font-size: 30px; font-weight: 300; line-height: 150%; margin: 0; text-align: left; text-shadow: 0 1px 0 #f93; color: #fff; background-color: inherit;' bgcolor=""inherit""></h1>
											</td>
										</tr>
									</table><br><img src='https://www.site.com/test.png' width='230' height='55' style='float:right'></br>
									<!-- End Header -->
								</td>
							</tr>
							<tr>
								<td align=""center"" valign=""top"">
									<!-- Body -->
									<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""600"" id=""template_body"">
										<tr>
											<td valign=""top"" id=""body_content"" style=""background-color: #fff;"" bgcolor=""#fff"">
												<!-- Content -->
												<table border=""0"" cellpadding=""20"" cellspacing=""0"" width=""100%"">
													<tr>
														<td valign=""top"" style=""padding: 48px 48px 32px;"">
															<div id=""body_content_inner"" style='color: #636363; font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; font-size: 14px; line-height: 150%; text-align: left;' align=""left"">

<p style=""margin: 0 0 16px;"">Hello,</p>
<p style=""margin: 0 0 16px;"">new data:</p>

 
 
 



<h2 style='color: #ff8000; display: block; font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;'>
</h2><!-- Content Some Text -->

<div style=""margin-bottom: 40px;""><strong> Test: </strong><br>
	<table class=""td"" cellspacing=""0"" cellpadding=""6"" border=""1"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;"" width=""100%"">
		<thead>
			<tr>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Ref. Code</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Itemname</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Date</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Price</th>
			</tr>
		</thead>
		<tbody>
		
	<tr class=""order_item"">" & Concat(temp,
		"<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		'UPC CODE' & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		'ITEM NAME' & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		ENDDATE & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		PRICE & 
 		"€</td>


	</tr>
	

	
	
		</tbody>

	") & "</table>
 </div>


	<p style=""margin: 0 0 16px;"">Thank you!</p>

	</div>
	</td>
	</tr>
	</table>
	<!-- End Content -->
	</td>
	</tr>
	</table>
	<!-- End Body -->
								
	</div>
	</body>
</html>"

Thank you.

Categories:
Building Power Apps
I have the same question (0)
  • Verified answer
    iAm_ManCat Profile Picture
    iAm_ManCat 18,256 Most Valuable Professional on at

    Hey @TimmyBoy,

     

    The issue was that your Concat, was wrapped on the inner TD (the list of columns) rather than just outside of that around the TR (table row), so it never created a new row for each item concat'd

     

    Here's an updated copy of your code that you can use:

     

    "<html lang=""nl"">
	<head>
		<meta http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"">
		<title>Test file</title>
	</head>
	<body leftmargin='0' marginwidth=""0"" topmargin=""0"" marginheight=""0"" offset=""0"" style=""padding: 0;"">
		<div id=""wrapper"" dir=""ltr"" style=""background-color: #f7f7f7; margin: 0; padding: 70px 0; width: 100%; -webkit-text-size-adjust: none;"" bgcolor=""#f7f7f7"" width=""100%"">
			<table border=""0"" cellpadding=""0"" cellspacing=""0"" height=""100%"" width=""100%"">
				<tr>
					<td align=""center"" valign=""top"">
						<div id=""template_header_image""></div>
						<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""600"" id=""template_container"" style=""background-color: #fff; border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0,0,0,.1); border-radius: 3px;"" bgcolor=""#fff"">
							<tr>
								<td align=""center"" valign=""top"">
									<!-- Header -->
									<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"" id=""template_header"" style='background-color: #ff8000; color: #fff; border-bottom: 0; font-weight: bold; line-height: 100%; vertical-align: middle; font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; border-radius: 3px 3px 0 0;' bgcolor=""#ff8000"">
										<tr>
											<td id=""header_wrapper"" style=""padding: 36px 48px; display: block;"">
												<h1 style='font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; font-size: 30px; font-weight: 300; line-height: 150%; margin: 0; text-align: left; text-shadow: 0 1px 0 #f93; color: #fff; background-color: inherit;' bgcolor=""inherit""></h1>
											</td>
										</tr>
									</table><br><img src='https://www.site.com/test.png' width='230' height='55' style='float:right'></br>
									<!-- End Header -->
								</td>
							</tr>
							<tr>
								<td align=""center"" valign=""top"">
									<!-- Body -->
									<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""600"" id=""template_body"">
										<tr>
											<td valign=""top"" id=""body_content"" style=""background-color: #fff;"" bgcolor=""#fff"">
												<!-- Content -->
												<table border=""0"" cellpadding=""20"" cellspacing=""0"" width=""100%"">
													<tr>
														<td valign=""top"" style=""padding: 48px 48px 32px;"">
															<div id=""body_content_inner"" style='color: #636363; font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; font-size: 14px; line-height: 150%; text-align: left;' align=""left"">

<p style=""margin: 0 0 16px;"">Hello,</p>
<p style=""margin: 0 0 16px;"">new data:</p>

 
 
 



<h2 style='color: #ff8000; display: block; font-family: ""Helvetica Neue"",Helvetica,Roboto,Arial,sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;'>
</h2><!-- Content Some Text -->

<div style=""margin-bottom: 40px;""><strong> Test: </strong><br>
	<table class=""td"" cellspacing=""0"" cellpadding=""6"" border=""1"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;"" width=""100%"">
		<thead>
			<tr>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Ref. Code</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Itemname</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Date</th>
				<th class=""td"" scope=""col"" style=""color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;"" align=""left"">Price</th>
			</tr>
		</thead>
		<tbody>
		" & Concat(temp,"
	<tr class=""order_item"">
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		'UPC CODE' & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		'ITEM NAME' & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		ENDDATE & 
 		"</td>
		<td class=""td"" style=""color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;"" align=""left"">" &
		PRICE & 
 		"€</td>


	</tr>
	")&"

	
	
		</tbody>

	</table>
 </div>


	<p style=""margin: 0 0 16px;"">Thank you!</p>

	</div>
	</td>
	</tr>
	</table>
	<!-- End Content -->
	</td>
	</tr>
	</table>
	<!-- End Body -->
								
	</div>
	</body>
</html>"

     

     

    Cheers,

    Sancho

  • TimmyBoy Profile Picture
    TimmyBoy 997 on at

    @iAm_ManCat 

    A, i see

    Thank you so much, just what i wanted 😃

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
You're Invited to Keeping It Real with the Power Platform

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Vish WR Profile Picture

Vish WR 914

#2
11manish Profile Picture

11manish 627

#3
Valantis Profile Picture

Valantis 598

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans