Skip to main content
Nintex Community Menu Bar
Solved

HTML create email template

  • July 19, 2023
  • 15 replies
  • 155 views
  • Translate
W
Forum|alt.badge.img+5

Dears,

 

I have an issue in the HTML, its displayed good inside Nintex environment but when I receive email from Nintex I get the table not looks good please take a look in my code, I want the table to be in the middle of the email.

<table class="center">

                <tbody>

                                <tr style="background-color:#18961c; color: white;">

                                                <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Dear</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">g&nbsp;‍</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">السيد</span></span></td>

                                </tr>

                                <tr>

                                                <td style="border: 1px solid black; padding: 5px;" colspan="5">

                                                <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">This email is to inform you that, there is a New customer request for (‍) and requires action.</span></span></p>

 

                                                <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">Click on the below link to see the customer information<br>

                                                Thank you,</span></p>

                                                </td>

                                </tr>

                                <tr>

                                                <td style="border: 1px solid black; padding: 5px;" colspan="5">

                                                <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">هذا البريد الالكتروني لابلاغك بأن هناك طلب عميل جديد () بحاجة الى اجراء.</span></span></p>

 

                                                <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">يرجى النقر على الرابط أدناه للاطلاع على معلومات العميل والتعميد.</span></p>

 

                                                <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">شكراً لك</span></p>

                                                </td>

                                </tr>

                                <tr style="background-color:#18961c; color: white;">

                                                <td style="border: 1px solid black; padding: 5px; text-align: center;" colspan="5"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Active request</span></span></td>

                                </tr>

                                <tr>

                                                <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Account Type</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">g&nbsp;‍</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">نوع الحساب</span></span></td>

                                </tr>

                                <tr>

                                                <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">#C(‍)</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رقم الطلب</span></span></td>

                                </tr>

                                <tr>

                                                <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request Link</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">‍ ‍g</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط الطلب</span></span></td>

                                </tr>

                                <tr>

                                                <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">xx</span></span></td>

                                                <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط تتبع الطلب</span></span></td>

                                </tr>

                </tbody>

</table>

 

 

Best answer by Garrett

Hi @wejdan 

I have an issue in the HTML, its displayed good inside Nintex environment but when I receive email from Nintex I get the table not looks good please take a look in my code, I want the table to be in the middle of the email.

 

What do you want to accomplish? Center the HTML Table in the email, right?

 

To place the table in the center of the email, add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag. The table tag would look like the following.

<table class="center" style="border:1px solid black;margin-left:auto;margin-right:auto;">

 

View original
Did this topic help you find an answer to your question?

15 replies

MillaZ
Nintex Employee
Forum|alt.badge.img+21
  • MillaZNintex Employee
  • Nintex Employee
  • 667 replies
  • July 19, 2023

Hi @wejdan 
Please add text to your question.

Translate
Check out these Nintex University Learning paths: https://community.nintex.com/p/NintexUniversity
W
Forum|alt.badge.img+5
  • wejdan
  • Author
  • Rookie
  • 31 replies
  • July 19, 2023

please check now

Translate
MillaZ
1 person likes this
  • MillaZ
    MillaZ
MillaZ
Nintex Employee
Forum|alt.badge.img+21
  • MillaZNintex Employee
  • Nintex Employee
  • 667 replies
  • July 19, 2023

Thanks!

Translate
Check out these Nintex University Learning paths: https://community.nintex.com/p/NintexUniversity
Garrett
Forum|alt.badge.img+16
  • Garrett
  • Scout
  • 904 replies
  • Answer
  • July 19, 2023

Hi @wejdan 

I have an issue in the HTML, its displayed good inside Nintex environment but when I receive email from Nintex I get the table not looks good please take a look in my code, I want the table to be in the middle of the email.

 

What do you want to accomplish? Center the HTML Table in the email, right?

 

To place the table in the center of the email, add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag. The table tag would look like the following.

<table class="center" style="border:1px solid black;margin-left:auto;margin-right:auto;">

 

Translate
W
Forum|alt.badge.img+5
  • wejdan
  • Author
  • Rookie
  • 31 replies
  • July 19, 2023

it looks like this picture

 

Translate
W
Forum|alt.badge.img+5
  • wejdan
  • Author
  • Rookie
  • 31 replies
  • July 19, 2023

<table class="center">
    <tbody>
        <tr style="background-color:#18961c; color: white;">
            <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Dear</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">&nbsp;‍</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">السيد</span></span></td>
        </tr>
        <tr>
            <td style="border: 1px solid black; padding: 5px;" colspan="5">
            <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">This email is to inform you that, there is a New customer request for (‍) and requires action.</span></span></p>

            <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">Click on the below link to see the customer information<br>
            Thank you,</span></p>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid black; padding: 5px;" colspan="5">
            <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">هذا البريد الالكتروني لابلاغك بأن هناك طلب عميل جديد () بحاجة الى اجراء.</span></span></p>

            <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">يرجى النقر على الرابط أدناه للاطلاع على معلومات العميل والتعميد.</span></p>

            <p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">شكراً لك</span></p>
            </td>
        </tr>
        <tr style="background-color:#18961c; color: white;">
            <td style="border: 1px solid black; padding: 5px; text-align: center;" colspan="5"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Active request</span></span></td>
        </tr>
        <tr>
            <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Account Type</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">g&nbsp;‍</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">نوع الحساب</span></span></td>
        </tr>
        <tr>
            <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">#C(‍)</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رقم الطلب</span></span></td>
        </tr>
        <tr>
            <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request Link</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">‍ ‍g</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط الطلب</span></span></td>
        </tr>
        <tr>
            <td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">xx</span></span></td>
            <td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط تتبع الطلب</span></span></td>
        </tr>
    </tbody>
</table>

Translate
Garrett
Forum|alt.badge.img+16
  • Garrett
  • Scout
  • 904 replies
  • July 19, 2023

Hi @wejdan 

 

Replace

<table class="center">

with 

<table class="center" style="border:1px solid black;margin-left:auto;margin-right:auto;"

Translate
W
Forum|alt.badge.img+5
  • wejdan
  • Author
  • Rookie
  • 31 replies
  • July 19, 2023

this is the result

 

Translate
Garrett
Forum|alt.badge.img+16
  • Garrett
  • Scout
  • 904 replies
  • July 19, 2023

ok noted.

Seem like Outlook client is showing a different result 

 

My webmail receives the following

 

This is the result from JSFiddle

 

Translate
Garrett
Forum|alt.badge.img+16
  • Garrett
  • Scout
  • 904 replies
  • July 19, 2023

Hi @wejdan 

Found the issue

You are using “colspan="5" for your single td tag when you only have 3 <td>s.

Just replace to “colspan="3".

 

Result in Outlook

 

Hope that solves your issue

Translate
W
Forum|alt.badge.img+5
  • wejdan
  • Author
  • Rookie
  • 31 replies
  • July 20, 2023

the table is looking good now but still in the left side not middle

 

Translate
Garrett
Forum|alt.badge.img+16
  • Garrett
  • Scout
  • 904 replies
  • July 20, 2023

Hi @wejdan 

Its fairly straight-forward to center the text

  1. Select the Text
  2. Click Center

Hope that solves your issue

Translate
W
Forum|alt.badge.img+5
  • wejdan
  • Author
  • Rookie
  • 31 replies
  • July 20, 2023

I mean the table not the text inside

Translate
Garrett
Forum|alt.badge.img+16
  • Garrett
  • Scout
  • 904 replies
  • July 20, 2023

Hi @wejdan 

Add <div> tags before the table

<div style="text-align:center">

 

Full HTML

<div style="text-align:center">
<table style="border:1px solid black;margin-left:auto;margin-right:auto;" class="center">
	<tbody>
		<tr style="background-color:#18961c; color: white;">
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Dear</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">&nbsp;‍</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">السيد</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;" colspan="3">
			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">This email is to inform you that, there is a New customer request for (‍) and requires action.</span></span></p>

			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">Click on the below link to see the customer information<br>
			Thank you,</span></p>
			</td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;" colspan="3">
			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">هذا البريد الالكتروني لابلاغك بأن هناك طلب عميل جديد () بحاجة الى اجراء.</span></span></p>

			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">يرجى النقر على الرابط أدناه للاطلاع على معلومات العميل والتعميد.</span></p>

			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">شكراً لك</span></p>
			</td>
		</tr>
		<tr style="background-color:#18961c; color: white;">
			<td style="border: 1px solid black; padding: 5px; text-align: center;" colspan="3"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Active request</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Account Type</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">g&nbsp;‍</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">نوع الحساب</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">#C(‍)</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رقم الطلب</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request Link</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">‍ ‍g</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط الطلب</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">xx</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط تتبع الطلب</span></span></td>
		</tr>
	</tbody>
</table>
</div>

 

Result in Outlook - Table is centered

 

Hope that solves your issue

Translate
W
1 person likes this
  • W
    wejdan
W
Forum|alt.badge.img+5
  • wejdan
  • Author
  • Rookie
  • 31 replies
  • July 20, 2023
Garrett wrote:

Hi @wejdan 

Add <div> tags before the table

<div style="text-align:center">

 

Full HTML

<div style="text-align:center">
<table style="border:1px solid black;margin-left:auto;margin-right:auto;" class="center">
	<tbody>
		<tr style="background-color:#18961c; color: white;">
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Dear</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">&nbsp;‍</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">السيد</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;" colspan="3">
			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">This email is to inform you that, there is a New customer request for (‍) and requires action.</span></span></p>

			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">Click on the below link to see the customer information<br>
			Thank you,</span></p>
			</td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;" colspan="3">
			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">هذا البريد الالكتروني لابلاغك بأن هناك طلب عميل جديد () بحاجة الى اجراء.</span></span></p>

			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">يرجى النقر على الرابط أدناه للاطلاع على معلومات العميل والتعميد.</span></p>

			<p style="text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;">شكراً لك</span></p>
			</td>
		</tr>
		<tr style="background-color:#18961c; color: white;">
			<td style="border: 1px solid black; padding: 5px; text-align: center;" colspan="3"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Active request</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Account Type</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">g&nbsp;‍</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">نوع الحساب</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">#C(‍)</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رقم الطلب</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request Link</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">‍ ‍g</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط الطلب</span></span></td>
		</tr>
		<tr>
			<td style="border: 1px solid black; padding: 5px;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">Request No</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: center;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">xx</span></span></td>
			<td style="border: 1px solid black; padding: 5px; text-align: right;"><span style="font-family:Courier New,Cutive Mono,monospace;"><span style="font-size:14px;">رابط تتبع الطلب</span></span></td>
		</tr>
	</tbody>
</table>
</div>

 

Result in Outlook - Table is centered

 

Hope that solves your issue

worked, thank you very much.

Translate
MillaZ
1 person likes this
  • MillaZ
    MillaZ

Reply


Sidebar Buttons
Nintex Community Home Contact Nintex Support Email Nintex Community Check Nintex Status
Terms & ConditionsCookie Settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings