如何调整表格页脚中的填充

时间:2016-10-24 15:23:36

标签: html css email html-email email-templates

I wanna create a footer like this using tables但我最终还是这样。如果我给#34填充,请致电我们"行,之前创建的列也受到影响请给我一个解决方案。只是帮助我输入最后两行,如果我在任何部分犯了错误,请帮助我纠正。

这是我的HTML



<!DOCTYPE html>
<html>
<head>
	<title>Email Template</title>
</head>
<body style="margin:0 auto;">
	<div class="table-container" style="margin:0 auto; width:700px; height:auto; background-color:#fafafa; font-family: Tahoma, sans-serif;">
		<table cellpadding="0" cellspacing="0" style="margin:0 auto; width:650px;">
			<thead>
				<tr>
					<td>
						<div style="border-bottom:3px solid #dedede; ">
							<img src="../images/index.png" style="display:block; margin:auto; padding:20px 0 30px;">
						</div>
					</td>
				</tr>
			</thead>
			<table style="margin:0 auto; width:530px;">
				<tbody>
					<tr>
						<td colspan="2" style="color:#444d54; border-bottom:2px solid #dedede; padding:20px 0; font-size:16px;">
							<span style="color:#444d54; font-size:25px; letter-spacing: 1px;"> 
								You Successfully Signed Up<br>with HelloSells
							</span>
							<p style="color:#444d54; font-weight:bold;">
								Hello Michael Payne
							</p>
							<p style="color:#646b72; font-size:16px;">
								Thanks for signing up with HelloSells!
							</p>
							<p style="color:#646b72; font-size:16px; line-height:1.5em; padding:20px 0;">			We're excited to start helping you grow your business. Our team is already 		  on activating your account. We'll contact you shortly to get your 24&Chi;7&Chi;  365 service up and running.
							</p>
							<p style="color:#646b72; font-size:16px;">
								Here's your billing, service, and profile information.
							</p>
						</td>
					</tr>	
					<!-- Billing info -->
					<tr>
						<td colspan="2" style="letter-spacing:1px; color: #444d54; font-weight:bold; padding:30px 0 30px;">BILLING INFORMATION</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Unique Pin</td>
						<td style="color:#646b72;">838b4e1f-88c6-4840-8438-fbadcf5a7a44</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Company Name</td>
						<td style="color:#646b72;">test company</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Name</td>
						<td style="color:#646b72;">Avinash</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Phone</td>
						<td style="color:#646b72;">9090909090</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Address</td>
						<td style="color:#646b72;">test</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">City</td>
						<td style="color:#646b72;">test</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">State</td>
						<td style="color:#555d64;">California</td>
					</tr>
					<tr>
						<td style="color:#444d54;font-weight:bold; line-height: 2em;">Postal Code</td>
						<td style="color:#555d64;">1231</td>
					</tr>
					<tr>
						<td colspan="2" style="border-bottom:2px solid #dedede; padding:30px 0 0;"></td>
					</tr>
					<!-- YOUR ONLINE PROFILE -->
					<tr>
						<td colspan="2" style="letter-spacing:1px; color: #444d54; font-weight:bold; padding:30px 0 30px;">YOUR ONLINE PROFILE</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Email Address</td>
						<td style="color:#646b72;">nash@hellosells.com</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Account Number</td>
						<td style="color:#646b72;">883013965</td>
					</tr>
					<tr>
						<td style="color:#444d54;font-weight:bold; line-height: 2em;">Service Plan</td>
						<td style="color:#646b72;">$200/mo</td>
					</tr>
					<tr>
						<td colspan="2" style="border-bottom:2px solid #dedede; padding:30px 0 0;"></td>
					</tr>
					<!-- charges -->
					<tr>
						<td style="letter-spacing:1px; color: #444d54; font-weight:bold; padding:30px 0 30px;">CHARGES</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Service Plan</td>
						<td style="color:#646b72;">$200</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Additional Services</td>
						<td style="color:#646b72;">$0</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Account Number</td>
						<td style="color:#646b72;">$0</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Setup Charges</td>
						<td style="color:#646b72;">$49</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Total Charges</td>
						<td style="color:#646b72;">$249</td>
					</tr>
					<tr>
						<td style="color:#444d54; font-weight:bold; line-height: 2em;">Transaction ID</td>
						<td style="color:#646b72;">B70P7B98666B</td>
					</tr>
					<tr>
						<td colspan="2" style="border-bottom:2px solid #dedede; padding:30px 0 0;"></td>
					</tr>
					</tbody>
					<!-- img section-->		
					<tfoot>
						<tr>
							<td style="padding:40px 0 40px;"><img src="../images/logo_footer.png"></td>
							<td style="color:#444d54; padding:40px 0 30px; ">Thank You</td>
						</tr>
						<tr>
							<td style=""></td>
							<td style="color:#646b72;">Call us at <a href="#" style="text-decoration:none; color:#59a3ea;">1.800.461.8520</a> or send an email at: <a href="#" style="text-decoration:none; color:#59a3ea;">help@hellosells.com</a> if you have any questions.</td>
						</tr>
					</tfoot>		
		</table>
	</div>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

像这样,你将“谢谢”行的底部填充更改为0,padding: 30px 0 0

更新,在标记中添加注释以显示更改内容,我添加了缺少的colspan="2"并修复了2个表之间的标记(1而不是2)

如果您希望左列的文字不会中断,请将空格替换为&nbsp;

<!DOCTYPE html>
<html>

<head>
  <title>Email Template</title>
</head>

<body style="margin:0 auto;">
  <div class="table-container" style="margin:0 auto; width:700px; height:auto; background-color:#fafafa; font-family: Tahoma, sans-serif;">
    <table cellpadding="0" cellspacing="0" style="margin:0 auto; width:650px;">
      <thead>
        <tr>
          <td>
            <div style="border-bottom:3px solid #dedede; ">
              <img src="../images/index.png" style="display:block; margin:auto; padding:20px 0 30px;">
            </div>
          </td>
        </tr>
      </thead>
      <!-- removed the table start tag -->
      <tbody>
        <tr>
          <td colspan="2" style="color:#444d54; border-bottom:2px solid #dedede; padding:20px 0; font-size:16px;">
            <span style="color:#444d54; font-size:25px; letter-spacing: 1px;"> 
								You Successfully Signed Up<br>with HelloSells
							</span>
            <p style="color:#444d54; font-weight:bold;">
              Hello Michael Payne
            </p>
            <p style="color:#646b72; font-size:16px;">
              Thanks for signing up with HelloSells!
            </p>
            <p style="color:#646b72; font-size:16px; line-height:1.5em; padding:20px 0;">We're excited to start helping you grow your business. Our team is already on activating your account. We'll contact you shortly to get your 24&Chi;7&Chi; 365 service up and running.
            </p>
            <p style="color:#646b72; font-size:16px;">
              Here's your billing, service, and profile information.
            </p>
          </td>
        </tr>
        <!-- Billing info -->
        <tr>
          <td colspan="2" style="letter-spacing:1px; color: #444d54; font-weight:bold; padding:30px 0 30px;">BILLING INFORMATION</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Unique Pin</td>
          <td style="color:#646b72;">838b4e1f-88c6-4840-8438-fbadcf5a7a44</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;padding-right: 50px">Company&nbsp;Name</td>
          <td style="color:#646b72;">test company</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Name</td>
          <td style="color:#646b72;">Avinash</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Phone</td>
          <td style="color:#646b72;">9090909090</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Address</td>
          <td style="color:#646b72;">test</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">City</td>
          <td style="color:#646b72;">test</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">State</td>
          <td style="color:#555d64;">California</td>
        </tr>
        <tr>
          <td style="color:#444d54;font-weight:bold; line-height: 2em;">Postal Code</td>
          <td style="color:#555d64;">1231</td>
        </tr>
        <tr>
          <td colspan="2" style="border-bottom:2px solid #dedede; padding:30px 0 0;"></td>
        </tr>
        <!-- YOUR ONLINE PROFILE -->
        <tr>
          <td colspan="2" style="letter-spacing:1px; color: #444d54; font-weight:bold; padding:30px 0 30px;">YOUR ONLINE PROFILE</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Email Address</td>
          <td style="color:#646b72;">nash@hellosells.com</td>
        </tr>
        <tr>
          <td style="color#444d54; font-weight:bold; line-height: 2em;">Account Number</td>
          <td style="color:#646b72;">883013965</td>
        </tr>
        <tr>
          <td style="color:#444d54;font-weight:bold; line-height: 2em;">Service Plan</td>
          <td style="color:#646b72;">$200/mo</td>
        </tr>
        <tr>
          <td colspan="2" style="border-bottom:2px solid #dedede; padding:30px 0 0;"></td>
        </tr>
        <!-- charges -->
        
        <!--  colspan="2" was missing in below td -->
        <tr>
          <td colspan="2" style="letter-spacing:1px; color: #444d54; font-weight:bold; padding:30px 0 30px;">CHARGES</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Service Plan</td>
          <td style="color:#646b72;">$200</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Additional Services</td>
          <td style="color:#646b72;">$0</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Account Number</td>
          <td style="color:#646b72;">$0</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Setup Charges</td>
          <td style="color:#646b72;">$49</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Total Charges</td>
          <td style="color:#646b72;">$249</td>
        </tr>
        <tr>
          <td style="color:#444d54; font-weight:bold; line-height: 2em;">Transaction ID</td>
          <td style="color:#646b72;">B70P7B98666B</td>
        </tr>
        <tr>
          <td colspan="2" style="border-bottom:2px solid #dedede; padding:30px 0 0;"></td>
        </tr>
      </tbody>
      <!-- img section-->
      <tfoot>
        <tr>
          <td style="padding:30px 0 0;">
            <img src="http://placehold.it/50/f00">
          </td>
          <td style="color:#444d54; padding:30px 0 0; ">Thank You</td>
        </tr>
        <tr>
          <td style=""></td>
          <td style="color:#646b72;">Call us at <a href="#" style="text-decoration:none; color:#59a3ea;">1.800.461.8520</a> or send an email at: <a href="#" style="text-decoration:none; color:#59a3ea;">help@hellosells.com</a> if you have any questions.</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>