谁能告诉我为什么这个布局中的行突破了宽度?我知道这是一个固定宽度的静态布局,这是一个内联混乱,但这是我们需要使用,直到我可以开发流体/响应布局。固定的HTML表格布局突破宽度
自学的编码器,所以这里可能有很多我做错了。布局应该是单列,底部需要一行,需要3个表格单元格,如代码片段所示。
<!doctype html>
<html>
<head><title>JFG eNewsletter</title></head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
\t <tr>
\t \t <td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
\t \t \t <table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
\t \t \t \t <tr style="background-color: #72113D; width: 600px;">
\t \t \t \t \t <td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="johnsonbank.com"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" /></a>
\t \t \t \t \t </td>
\t \t \t \t \t <td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
\t \t \t \t \t \t Make the Most of Your Business<br />
\t \t \t \t \t \t <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
\t \t \t \t \t \t <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
\t \t \t \t \t \t <a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="background-color: #82204C; height: 15px;">
\t \t \t \t \t <td align="center" colspan="5"></td>
\t \t \t \t </tr>
\t \t \t \t <tr style="width: 600px; max-width: 600px;">
\t \t \t \t \t <td align="center" colspan="5">
\t \t \t \t \t \t <a href="" title=""><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" /></a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="background-color: #E4E0D6; height: 15px;">
\t \t \t \t \t <td align="center" colspan="5"></td>
\t \t \t \t </tr>
\t \t \t \t <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
\t \t \t \t \t <td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a>
\t \t \t \t \t \t <br />BODY TEXT HERE... <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
\t \t \t \t \t <td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a>
\t \t \t \t \t \t <br />BODY TEXT HERE... <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
\t \t \t \t \t <td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #72113D; font-size: 21px; font-weight: bold;">TITLE</a>
\t \t \t \t \t \t <br />BODY TEXT HERE... <a href="https://www.johnsonbank.com/" title="" style="text-decoration: none; color: #4583A6; font-weight: bold;">Read more</a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td align="center" colspan="5">
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/Resources/Articles?sortBy=&filterBy=%7B0b834bec-aecc-4625-b69e-c8a83f0eeabc%7D&selectItem=%7B0b834bec-aecc-4625-b69e-c8a83f0eeabc%7D"><img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" /></a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="background-color: #E4E0D6; height: 138px;">
\t \t \t \t \t <td align="center" colspan="5">
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/Business/Banking/Business-Mobile-Banking" title=""><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" /></a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr align="center" style="background-color: #FFFFFF;">
\t \t \t \t \t <td align="center" colspan="5">
\t \t \t \t \t \t <a href="https://www.johnsonbank.com/Resources/Articles/" title="Articles"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" /></a><a href="https://www.johnsonbank.com/Resources/Calculators/" title="Calculators"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" /></a><a href="https://www.johnsonbank.com/Resources/Events/" title="Events"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" /></a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="background-color: #82204C; height: 15px;">
\t \t \t \t \t <td align="center" colspan="5"></td>
\t \t \t \t </tr>
\t \t \t \t <tr align="center" style="background-color: #72113D;">
\t \t \t \t \t <td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
\t \t \t \t \t \t <table align="center" width="220">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="center" style="padding-bottom: 5px;"><a href="https://www.johnsonbank.com/" title="Johnson Bank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" /></a></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="center">
\t \t \t \t \t \t \t \t \t <a href="http://www.linkedin.com/company/johnson-bank/" title="Johnson Bank LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a>
\t \t \t \t \t \t \t \t \t <a href="https://www.facebook.com/johnsonbank/" title="Johnson Bank Facebook"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" /></a>
\t \t \t \t \t \t \t \t \t <a href="https://twitter.com/JohnsonBank/" title="Johnson Bank Twitter"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" /></a>
\t \t \t \t \t \t \t \t \t <a href="https://www.youtube.com/channel/UCODxjMU3HSr7G32b5JAYwKQ/" title="Johnson Bank YouTube Channel"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" /></a>
\t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t \t <td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
\t \t \t \t \t \t <table align="center" width="170">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="center" style="padding-bottom: 5px;">
\t \t \t \t \t \t \t \t \t <a href="https://www.johnsonins.com/" title="Johnson Insurance/" target="blank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" /></a>
\t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="center">
\t \t \t \t \t \t \t \t \t <a href="http://www.linkedin.com/company/johnson-insurance/" title="Johnson Insurance LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a>
\t \t \t \t \t \t \t \t \t <a href="https://www.facebook.com/JohnsonInsuranceServicesLLC/" title="Johnson Insurance Facebook"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" /></a>
\t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t \t <td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
\t \t \t \t \t \t <table align="center" width="150">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="center" style="padding-bottom: 5px;">
\t \t \t \t \t \t \t \t \t <a href="http://www.clearygulladvisors.com/" title="Cleary Gull Advisors" target="blank"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" /></a>
\t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td align="center">
\t \t \t \t \t \t \t \t \t <a href="https://www.linkedin.com/company/cleary-gull/" title="Cleary Gull Advisors LinkedIn"><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" /></a>
\t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block;">
\t \t \t \t \t <td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
\t \t \t \t \t \t <img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
\t \t \t \t \t </td>
\t \t \t \t \t <td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
\t \t \t \t \t \t <strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non‐depository investment products offered and sold through Johnson Bank and Cleary Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non‐depository investment products are subject to investment risks, including possible loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
\t \t \t \t \t <td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
\t \t \t \t \t \t <a href="http://app.subscribermail.com/unsub.cfm?tempid=%_tempid%&mailid=%_mailid%" title="Unsubscribe" style="color: #454646; text-decoration: none;">Unsubscribe or update your email address</a> | 555 Main Street | Racine, WI 53403
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t </table>
\t \t </td>
\t </tr>
</table>
</body>
</html>
你是指脚注? – circusdei
是的,它打破了页眉和页脚。 –