Skip to main content

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>

 

 

Hi @wejdan 
Please add text to your question.

please check now

Thanks!

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;">

 

it looks like this picture

 

<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>

Hi @wejdan 

 

Replace

<table class="center">

with 

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

this is the result

 

ok noted.

Seem like Outlook client is showing a different result 

 

My webmail receives the following

 

This is the result from JSFiddle

 

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

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

 

Hi @wejdan 

Its fairly straight-forward to center the text

  1. Select the Text
  2. Click Center

Hope that solves your issue

I mean the table not the text inside

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

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.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings