I'm relatively new to HTML Email Development, and I'm trying to wrap my head around nested tables, specifically WHEN to nest a table, create a tr tag pair, or add a td tag pair. Below is a code snippet from a real-world example of an HTML Email located at this URL to illustrate the basis of my confusion: https://reallygoodemails.com/emails/save-30-for-our-winter-sale/live
<body style="margin:0; padding:0; min-width:100%; background-color:transparent;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">Our Winter Sale gets better</div>
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td style="background-color:transparent;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="center" style="background-color:transparent; border-top-style: none; border-bottom-style: none; border-right-style: none; border-left-style: none; border-top-width: 0px; border-bottom-width: 0px; border-right-width: 0px; border-left-width: 0px; border-color: #222222;">
<!--[if(gte mso 9)|(IE)]><table width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px;" role="presentation"> <tr> <td align="center"><![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;" role="presentation">
<tr>
<td align="center" style="background-color:#000000">
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr >
<td style="padding: 10px 10px 10px 10px; border-width: 0px; border-style: none; font-family: 'soehne-web-buch', Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #222222; line-height: 1.5; text-align: center">
<p style="margin: 0px; padding: 0px;"><span style="color:rgb(255, 255, 255); font-family:neusanextpro-condensedlight,arial,helvetica,sans-serif"><span style="letter-spacing:2px"><i><a href="http://enews.saxxunderwear.com/q/R9jim0BXYC7rm0Xq39_vyPg_M10yCZNUNEHZcLOJbWF0dGhld0ByZWFsbHlnb29kZW1haWxzLmNvbcOIPt_chqcYdIroPVYZqAC1RDbf1A" style="color:#ffffff;text-decoration:none;" target=
"_blank" title="SET UP AN ACCOUNT TO BE ELIGIBLE FOR FREE SHIPPING" data-link-name="WINTER SALE: 30% OFF.">WINTER SALE: 30% OFF.</a> FREE SHIPPING AVAILABLE WITH AN ACCOUNT. <a href="http://enews.saxxunderwear.com/q/fyo89AKFHe5xD0XpfKsqmahpuN9CevUgh5UZcOJbWF0dGhld0ByLZWFsbHlnb29kZW1haWxzLmNvbcOIQzNjZV5Pcr0eVO1_pLw6d0szaw" style="color:#ffffff;text-decoration:underline;" target="_blank" title=
"" data-link-name="LEARN MORE"><u>LEARN MORE</u></a><a href="http://enews.saxxunderwear.com/q/YSTmkctvfNwLo0XGaNue3OjIVQObNHs2jWDZcOJbWF0dLGhld0ByZWFsbHlnb29kZW1haWxzLmNvbcOIlmZZNFUuc7bp4ycY1kS-E55mUQ" style="color:#ffffff;text-decoration:underline;" target="_blank" title="" data-link-name="."><u>.</u></a></i></span></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>There are SIX tables here and—although I understand what Table 1 and Table 6 are doing—the other four tables are confusing.
Table 2 looks like it defines the wrapper for the page. But doesn’t Table 1 do that already? If so, why is it there?
Table 3 and Table 4 look like they both act as the main container for the HTML email template, since they both define the width of the main table. But I don’t understand why Table 3 is necessary when Table 4 specifies the same width of 600px?
Table 5 has a class of “Column-1”, but there isn’t a class labelled “Column-1” in the stylesheets found in the head of the document, so why is it there?
These observations, among others, have made me realize that there is a TON of variation in HTML Email Development whenever nested tables are concerned. So much so that it makes it difficult to derive a general rule of thumb for table, tr, and td use. But from what I can see:
- Tables are used for cutting the page into blocks and specifying the size of said blocks.
- Tr tag pairs are used for defining separate sections in an HTML Email Template.
- Td tag pairs are used for content placement (in child tables) or content formatting (in parent tables).
Can anyone validate my observations or, better yet, give me a more detailed explanation of WHEN to make a new table, tr, or td in the context of HTML Email Development?
Thanks in advance!
P.S. Please correct me if I am wrong on any of my observations. I truly want to learn the nuances of this field to the best of my ability.
CodePudding user response：
Generally in HTML, using tables for creating layout is considered a bad practice, but I guess in email HTML it is more acceptable because support for old applications is very important so using modern layout tools is problematic.
Simply putting, <table></table> tags define an entire table (or table layout), <tr> tags define a table row, and <td> tags define a single cell within a row. You can never put content directly inside a row, it's always table -> row -> cell even if it's a row with only one cell.
A nested table inside a cell allows cutting that cell into smaller areas.