Как настроить отступы в нижнем колонтитуле таблицы

Я хочу создать нижний колонтитул, как это, используя таблицы, но я оказался в этом. Если я дам отступ для строки "Позвоните нам", столбцы, созданные ранее, также будут затронуты, пожалуйста, дайте мне решение. Просто помогите мне войти в эти последние две строки, и если я допустил ошибки в какой-либо части, пожалуйста, поправьте меня.

Вот мой 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>

Источник

1 ответ

Вот так, где вы меняете нижний отступ строки "Спасибо" на 0, padding: 30px 0 0

Обновлено, добавлены комментарии в разметке, чтобы показать, что изменилось, где я добавил недостающее colspan="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>

Источник
Другие вопросы по тегам