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

I wanna create a footer like this using tables, но я оказался в этом. Если я даю прописку для строки «позвонить нам», столбцы, созданные ранее, также будут затронуты, пожалуйста, предоставьте мне решение. Просто помогите мне войти в эти последние две строки, и если я совершил ошибки в какой-либо части, пожалуйста, поправьте меня.Как отрегулировать прописку в нижнем колонтитуле стола

Вот мой HTML

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

источник

2016-10-24 Baskar Kalyanasamy

Я не могу найти какой-либо «позвоните нам» линию – LGSon

Dont проверить фрагмент, проверьте изображение –

Подобно этому, когда вы меняете "Спасибо" нижнее заполнение Лайна до 0, padding: 30px 0 0

Обновлено, добавлены комментарии в разметке чтобы показать, что изменилось, где я добавил отсутствующий colspan="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;"> 
 
\t \t \t \t \t \t \t \t You Successfully Signed Up<br>with HelloSells 
 
\t \t \t \t \t \t \t </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;">[email protected]</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;">[email protected]</a> if you have any questions.</td> 
 
     </tr> 
 
     </tfoot> 
 
    </table> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-10-24 15:36:36 LGSon

yep точно, но без влияния на предыдущие столбцы –

@BaskarKalyanasamy И как мой ответ влияет на предыдущие столбцы? – LGSon

Нет, это не так, но всего лишь записка –

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

ответ

Смежные вопросы