我的表 alignment 在發送后立即變為（HTML Email for newsletter）

Question

我的桌子 alignment 有問題。 （HTML 時事通訊電子郵件）當我在 Dreamweaver 中打開它時，一切看起來都很正常，在我的瀏覽器上打開它並在我的 outlook 郵件中將其打開或附加為文本。 （在我發送之前）但是當我將它作為文本附加到 email 中發送時，收件人會看到表格的 alignment 是正確的。 （我實際上把所有東西都放在左邊 alignment 和 text-align 中）我是這個 HTML 的新手。

這是代碼片段中我的 email 代碼：

 <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> <tr> <td valign="center" align="center" class="p30-15" style="padding: 20px 0px 30px 0px;"> <table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell"> <tr> <td class="text-center pt40" style="color:#777777; font-family:'Spartan Medium'; font-size:20px; line-height:30px; text-align:left; vertical-align: top; padding-top: 10px; padding-bottom: 10px;"><strong>Deployment Detail:</strong></td> </tr> <tr> <td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction: rtl;"> <tr> <th class="column-top" dir="ltr" width="100%" align="left" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; text-align: left; vertical-align:top;"> <table width="100%" border="1" cellspacing="0" cellpadding="5"> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; align-content: center; align-self: center; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Maintenance and Deployment</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Saturday, 25th December 2021 01:00 AM UTC (UK Time)</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Friday, 31st December 2021 13:00 PM UTC (UK Time)</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Release 2.62.00</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Medium</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">All Users</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:11px; line-height:31px; text-align:left; vertical-align: top; font-weight:normal; padding-left: 10px; padding-bottom: 5px;"><p style="text-align: left; padding: 0px; margin: 0px;">1.) System reset feature (every 90 days)<br /> 2.) Data Renewal from 2013 to 2019 for inactive data<br /> 3.) monthly maintenance<br /> <strong>The Apps will not be accessible</strong> during the mentioned date &amp; time. Kindly ensure you logged out from system to avoid data loss.</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">Helpdesk@classy.com</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">#12345678</p></td> </tr> </table> </th> <:--<th class="column-empty" dir="ltr" width="60" style="font-size;0pt: line-height;0pt: padding;0: margin;0: font-weight;normal: vertical-align;top:"></th>--> <th class="column" dir="ltr" style="font-size;0pt: line-height;0pt: padding;0: margin;0: font-weight;normal:"> <table align="left" width="200" border="1" cellspacing="0" cellpadding="5"> <tr> <td class="text pb20" style="color;#000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight;bold: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">Event Type</p></td> </tr> <tr> <td class="text pb20" style="color;#0000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight; bold: padding-bottom; 5px: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">Start Date & Time</p></td> </tr> <tr> <td class="text pb20" style="color;#000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight;bold: padding-bottom;5px: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">End Date & Time</p></td> </tr> <tr> <td class="text pb20" style="color;#000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight;bold: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">Release Version</p></td> </tr> <tr> <td class="text pb20" style="color;#000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight;bold: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">Impact</p></td> </tr> <tr> <td class="text pb20" style="color;#0000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight; bold: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">Affected Users</p></td> </tr> <tr> <td class="text pb20" height="155" style="color;#000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight;bold: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">Remarks</p></td> </tr> <tr> <td class="text pb20" style="color;#0000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight; bold: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px:">Contact</p></td> </tr> <tr> <td class="text pb20" style="color;#0000000: font-family;'Spartan SemiBold': font-size;14px: line-height;32px: text-align;left: font-weight; bold: padding-left; 10px:"><p style="text-align; left: padding; 0px: margin; 0px;">Reference Number</p></td> </tr> </table> </th> </tr> </table> </td> </tr> </table> </td> </tr> </table>

這是用戶收到時的 email（表格部分）：

如果你們能幫助我或對我的問題有任何解決方案，我真的很感激。 謝謝你。

最好的問候， MST

Answer 1

嘗試這個。 這個 HTML 結構將解決您的問題。

 <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> <tr> <td valign="center" align="center" class="p30-15" style="padding: 20px 0px 30px 0px;"> <table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell"> <tr> <td class="text-center pt40" style="color:#777777; font-family:'Spartan Medium'; font-size:20px; line-height:30px; text-align:left; vertical-align: top; padding-top: 10px; padding-bottom: 10px;"><strong>Deployment Detail:</strong></td> </tr> <tr> <td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;"> <table align="left" width="200" border="1" cellspacing="0" cellpadding="5"> <tr> <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Event Type</p></td> </tr> <tr> <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-bottom: 5px; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Start Date & Time</p></td> </tr> <tr> <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-bottom:5px; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">End Date & Time</p></td> </tr> <tr> <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Release Version</p></td> </tr> <tr> <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Impact</p></td> </tr> <tr> <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Affected Users</p></td> </tr> <tr> <td class="text pb20" height="155" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Remarks</p></td> </tr> <tr> <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Contact</p></td> </tr> <tr> <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Reference Number</p></td> </tr> </table> </th> <th class="column-top" width="100%" align="left" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; text-align: left; vertical-align:top;"> <table width="100%" border="1" cellspacing="0" cellpadding="5"> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; align-content: center; align-self: center; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Maintenance and Deployment</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Saturday, 25th December 2021 01:00 AM UTC (UK Time)</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Friday, 31st December 2021 13:00 PM UTC (UK Time)</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Release 2.62.00</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Medium</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">All Users</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:11px; line-height:31px; text-align:left; vertical-align: top; font-weight:normal; padding-left: 10px; padding-bottom: 5px;"><p style="text-align: left; padding: 0px; margin: 0px;">1.) System reset feature (every 90 days)<br /> 2.) Data Renewal from 2013 to 2019 for inactive data<br /> 3.) monthly maintenance<br /> <strong>The Apps will not be accessible</strong> during the mentioned date &amp; time. Kindly ensure you logged out from system to avoid data loss.</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">Helpdesk@classy.com</p></td> </tr> <tr> <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">#12345678</p></td> </tr> </table> </th> </tr> </table> </td> </tr> </table> </td> </tr> </table>