Let me explain the key reasons:
1. Email Client Compatibility
The most important reason is email client compatibility. Your HTML needs to appear to be designed for email templates, and email clients have very limited CSS support.
- Many email clients strip out or ignore external CSS files
- Inline styles are more reliable but still limited
- Layout engines vary dramatically between Gmail, Outlook, Apple Mail, etc.
2. Table-Based Layout is Required
Email clients require table-based layouts because:
- CSS Grid and Flexbox are not supported in most email clients
- Tables provide consistent rendering across different email platforms
- Outlook (especially older versions) primarily uses Microsoft Word's rendering engine, which works best with tables
3. Specific Elements Used:
<table> - The foundation for email layouts
<tr>(table row)—Defines horizontal sections
<td> (table data) - Content containers that work reliably
<th> (table header) - For column headers (like "SN.", "ITEM DESCRIPTION")
<tbody> - Groups the main content rows together
- Why This Approach Works:
Looking at your code, I can see the nested table structure:
<table id="bodyTable">
<tbody>
<tr>
<td class="bodyCell">
<table id="root">
<tbody class="mceWrapper">
<!-- Content tables nested inside -->
This nested table approach is the standard for email templates because
It provides consistent spacing and alignment
Works across all major email clients
Allows for complex layouts using simple HTML
PDF Generation Benefits:
When converting to PDF:
Tables maintain their structure and formatting
Print-friendly layouts are preserved
Consistent rendering across different PDF generators
Best Practices
Inline styles - More reliable than external CSS
Table-based layout - Maximum compatibility
Nested tables - For complex layouts
Cell padding/spacing - Using table attributes for spacing
Conditional comments - For Outlook-specific fixes:
<!--[if (gte mso 9)|(IE)]>
<!-- Outlook-specific code -->
<![endif]-->
This approach ensures render correctly in
Gmail, Outlook, Apple Mail, Yahoo Mail
Mobile email clients
PDF generators
Print media
The trade-off is more verbose HTML, but the reliability across platforms makes it worth it for business-critical documents like invoices.
