Create HTML Content - Format table

Help Activities
, , ,
1

Hello,

I’m trying to send an email using ‘Create HTML Content’ to write a datatable in the body.
I tried to format this table by inserting CSS but the result isn’t what I expect.

This is the table:

<TABLE height=100 cellSpacing=0 cellPadding=0 width="100%" border=1>
<TBODY>
<TR>
  <TH>Header 1</TH>
  <TH>Header 2</TH>
  <TH>Header 3</TH></TR>
<TR>
  <TD>Content 1.1</TD>
  <TD>Content 1.2</TD>
  <TD>Content 1.3</TD></TR>
<TR>
  <TD>Content 2.1</TD>
  <TD>Content 2.2</TD>
  <TD>Content 2.3</TD></TR>
</TBODY></TABLE>

And the CSS:

<STYLE type=text/css>
	body {
		font-family: Arial;
		font-size: 12px;
		color: black;
	}

	p {
		margin: 0;
	}

	.mapping {
		background-color: #D3D4D7;
		padding: 1px;
	}

	table {
		text-align: center;
		font-size: 11px;
		border-width: 1px;
		border-style: solid;
		border-color: black;
		border-spacing: 10px
	}

	tr:nth-child(odd) td {
		background-color: #5b9bd5;
	}

	tr:nth-child(even) td {
		background-color: #95bee3;
	}

	th {
		background-color: #004080;
		color: white;
		font-size: 12px;
	}
 </STYLE>

I expect the table to have alternate colored rows but somehow they stay white as you can see (screen from inside the Create HTML Content activity preview).

image
image1886×111 1.76 KB

Here is the final code to be sent by email:

@"<HTML><HEAD>
<STYLE type=text/css>
	body {
		font-family: Arial;
		font-size: 12px;
		color: black;
	}

	p {
		margin: 0;
	}

	.mapping {
		background-color: #D3D4D7;
		padding: 1px;
	}

	table {
		text-align: center;
		font-size: 11px;
		border-width: 1px;
		border-style: solid;
		border-color: black;
		border-spacing: 10px
	}

	tr:nth-child(odd) td {
		background-color: #5b9bd5;
	}

	tr:nth-child(even) td {
		background-color: #95bee3;
	}

	th {
		background-color: #004080;
		color: white;
		font-size: 12px;
	}
 </STYLE>
<!-- Instruct the web browser control to use IE 6 to render the page. -->
<META content=IE=6 http-equiv=X-UA-Compatible></HEAD>
<BODY>
<P style=""MARGIN: 0px""><FONT face=Arial></FONT>&nbsp;</P>
<TABLE height=100 cellSpacing=0 cellPadding=0 width=""100%"" border=1>
<TBODY>
<TR>
<TH>Header 1</TH>
<TH>Header 2</TH>
<TH>Header 3</TH></TR>
<TR>
<TD>Content 1.1</TD>
<TD>Content 1.2</TD>
<TD>Content 1.3</TD></TR>
<TR>
<TD>Content 2.1</TD>
<TD>Content 2.2</TD>
<TD>Content 2.3</TD></TR></TBODY></TABLE></BODY></HTML>"

Before sending the email, I use ‘Write Text File’ to create a .html file. The .html is good but not the email sent.
HTML file saved:

image
image1912×113 2.01 KB

Email sent (the default background of the mail is light blue):
image
image1211×65 1.17 KB

Why are the results different?

2

Hi @j.reisser,

Instead of class directly set inline color. It will work
Example:
<p style="color: #ff0000">This text is red.</p>

3

Thanks for your answer @aanandsanraj , but if I do so, I have to do it for each row and my table can have a variable number of rows. Moreover, I have to find a way to distinct even from odd rows.

Do you think I can achieve my goal with tr:nth-child()?

4

have a check there
grafik

and identify which template file is used

Then open this template HTML in an external editor (e.g. notepad++)
grafik
And adapt / add the CSS definitions

5

Hi @ppr , thanks for your answer.
I put the right file in the HTML Template field that is “.data/HtmlContent1.html” for me and edited it as you said by replacing the CSS with mine.
When I open the “.data/HtmlContent1.html”, the result is the one I want but it still remains the wrong in the email sent…

6

please elaborate / share more on this. Maybe you can share

  • your used Html file
  • a screenshot from the Create HTML Content activity properties (Property panel)
  • and a sample of the wrong fromatted email

We still would analyse the approach more in detail. But we also have in mind that for

that we can generate this HTML snippet also with alternates

7

Here is the html file: HtmlContent1.html (1,0 Ko)

This is what I put in the Create HTML Content activity properties:
image

And this is the email sent:

image
image1237×101 1.31 KB

I would like to add that the email activity that is used is a custom one that I must use and I don’t know much about. But it has previously sent the kind of email I wish by using the method @aanandsanraj mentionned (I cannot show it because it contains a lot of confidential data). As I find the method not optimal, I would like to find another one.

8

how / with which activity was the email sent?

9

OK we replicated and came to the conclusion that nth-child is not supported
(maybe you can also crosscheck with additional research)

After some other experiments we would suggest to

  • define classes for even, odd rows
  • construct / reconstruct dynamic the table and assign the corresponding classes
10

Thanks @ppr , I will try otherway then.