I wanna create a footer like this using tables但我最终陷入了困境。如果我为“调用我们”行提供填充，之前创建的列也会受到影响，请为我提供解决方案。请帮我输入最后两行，如果我在任何部分犯了错误，请指正。
这是我的 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Χ7Χ 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>最佳答案
像这样，将“谢谢”行的底部填充更改为 0，padding: 30px 0 0
已更新，在标记中添加注释以显示更改内容，我在其中添加了一个缺失的 colspan="2" 并修复了 2 个表之间的标记(制作 1 个而不是 2 个)
如果您希望左栏的文本不换行，请将空格替换为
<!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Χ7Χ 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 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>关于html - 如何调整表格页脚的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40222042/