HTML表未按预期呈现

时间:2017-08-21 15:33:28

标签: html css

我正在尝试创建HTML电子邮件,因此使用了大量嵌套表。但是,我的第二行<tr>与第一行不一致,我不太清楚为什么。以下是它现在的表现: enter image description here

我希望第二行居中而不是触及边缘。

这就是我所拥有的:

		<!-- BACKGROUND -->
		<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000">
			<tbody>
				<tr>
					<td>
						<!-- SECTION 1 -->
						<!--START OF EMAIL BODY -->
						<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
							<tbody>
								<tr>
									<td>
										<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff">
											<tbody>
												<tr>
													<td height="30"><!-- PADDING --></td>
													<tr>
														<td style="font-family:Arial;font-size:12px;line-height:15px;color:#353535;text-align:center;">
														Not rendering correctly? View this email as a web page <a href="#" target="_blank" style="color:#54537e;">here</a>.
														</td>
													</tr>
													<tr>
														<td height="15"><!-- PADDING --></td>
													</tr>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
						<!--END OF EMAIL BODY -->
						<!-- SECTION 1 END -->
					</td>
				</tr>
				<tr>
					<td>
						<!--  SECTION 2 -->
						<!-- LOGO AND SOCIAL MEDIA -->
						<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF"> 
							<tbody>
								<tr>
									<td><!-- <td height="60">-->
										<table cellpadding="0" cellspacing="0" border="0">
											<tbody>
												<tr>
													<td width="425"><!-- PADDING --></td>
													<td style="font-family:Arial;font-size:10px;line-height:15px;color:#353535;text-align:center;font-weight:bold;">SHARE
                                                    </td>
													<td width="10"><!-- PADDING (SPACE BETWEEN SHARE AND LINKS) --></td>
													<!-- LINKEDIN-->
													<td>
													</td>
													<!-- TWITTER -->
													<td>
												</td>	
													<!-- YOUTUBE -->
													<td>
												</td>
												</tr>
											</tbody>
										</table>
										<!-- SECTION 2 END -->
									</td>

				</tr>
			</tbody>
		</table>

1 个答案:

答案 0 :(得分:1)

的对齐没有问题。

未对齐的是两个表行内。

比较

<!--START OF EMAIL BODY -->
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
<!-- LOGO AND SOCIAL MEDIA -->
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF">

其中一个集中。另一个是左对齐的。