誰能告訴我爲什麼這個佈局中的行突破了寬度?我知道這是一個固定寬度的靜態佈局,這是一個內聯混亂,但這是我們需要使用,直到我可以開發流體/響應佈局。固定的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
是的,它打破了頁眉和頁腳。 –