I know, tables went the way of html styling, right? Unfortunately, not when you’re writing an html email!
I’m working on an adaptive email newsletter template but I’ve clearly not understood my tables correctly, because the ‘feature story’ in the example below isn’t aligning with the rest of my articles…what am I doing wrong?
On a side note (but equally confusing to myself), I’m aware there’s no <td> to any of the <table class=“contentTable”> on lines 93 or 145. This is basically because when I apply a <td> for the contentTable, the nested tables (class=“articles”, “asides”) stop responding to the media query to form one column when the screen width is less than 480px. Any hand holding through this problem is much appreciated!
I’m still learning and I’m pretty sure my code isn’t as semantic as it ought to be, so feel free to point out any obvious best practice procedures that I’ve forgotten along the way…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Facebook sharing information tags -->
<meta property="og:title" content="Illuminate issue X" />
<meta name="viewport" content="width=device-width">
<title>Illuminate issue X</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
/* Smaller Screen Styles */
@media only screen and (max-width: 480px) {
table[id=backgroundTable]{
max-width:550px !important;
width:100% !important;
}
table[id=newsletterWrapper],table[class=contentTable], table[class=asides]{
width:320px !important;
}
table[class=FollowUs]{
display:none;
}
img[class=hideable]{
display:none;
}
}
.contentTable{
border:0;
width:550px;
padding:0;
cellspacing:0;
}
td{
padding:0 0 10px 10px;
}
.button{
background: #49A942;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
color: #fff;
font-weight: bold;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
}
.article img{
display: block;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table id="backgroundTable" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table id="newsletterWrapper" border="0" cellpadding="0" cellspacing="0" height="100" width="550">
<tr>
<td align="center" valign="top">
<!-- // Newsletter Preheader \\\\ -->
<table class="contentTable">
<tr>
<td class="preheaderContent" valign="top">
<p>Use this area to offer a short teaser of the newsletter content. Text here will show in the preview area of some email clients.
</p>
<a class="button">Subscribe to future issues</a>
<a class="button">View online</a>
<a class="button">Download as .pdf</a>
</td>
</tr>
</table>
<!-- // Newsletter Masthead \\\\ -->
<!-- // Newsletter Call to Action \\\\ -->
<table class="contentTable">
<tr>
<td valign="top">
<p>Blurb about us and donation CTA
</p>
<a class="button">Donate now</a>
</td>
</tr>
</table>
<!-- // Newsletter articles \\\\ -->
<table class="contentTable">
<tr>
<table class="articles" cellpadding="0" cellspacing="0" width="310" align="left">
<tr>
<td valign="top">
<img src="http://placehold.it/120x100" alt="" title="" align="left" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-right:10px;">
<h3>Research news 1</h3>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
</p>
<a class="button">Read more</a>
</td>
</tr>
<tr>
<td valign="top">
<img src="http://placehold.it/120x100" alt="" title="" align="right" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-left:10px;">
<h3>Community news 1</h3>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
</p>
<a class="button">Read more</a>
</td>
</tr>
</table>
<table class="asides" cellpadding="0" cellspacing="0" width="220">
<tr>
<td valign="top">
<h4>From the director</h4>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
</p>
</td>
</tr>
<tr>
<td valign="top">
<table class="FollowUs" cellpadding="0" cellspacing="0" width="220">
<tr>
<td>
<h4>Follow us</h4>
</td>
</tr>
<tr>
<td align="left" valign="middle" width="16">
<img src="facebook.jpg" alt="Facebook logo" title="Facebook" style="max-width:16px; max-height:16px; margin:0 !important;">
</td>
<td align="left" valign="middle" width="16">
<img src="twitter.jpg" alt="twitter logo" title="Twitter" style="max-width:16px; max-height:16px; margin:0 !important;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</tr>
</table>
<table class="contentTable">
<tr>
<table class="articles" cellpadding="0" cellspacing="0" width="310" align="left">
<tr>
<td valign="top">
<img src="http://placehold.it/310x200" alt="" title="" align="left" style="max-width:310px; max-height:200px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;">
<h3>Feature story</h3>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
</p>
<a class="button">Read more</a>
</td>
</tr>
</table>
<table class="asides" cellpadding="0" cellspacing="0" width="220">
<tr>
<td valign="top">
<img class="hideable" src="http://placehold.it/220x150" alt="" title="" align="left" style="max-width:220px; max-height:150px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;">
<h4>Staff profile 1</h4>
<h5>Position of staff member</h5>
<a class="button">Read more</a>
</td>
</tr>
<tr>
<td valign="top">
<img class="hideable" src="http://placehold.it/220x150" alt="" title="" align="left" style="max-width:220px; max-height:150px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;">
<h4>Staff profile 2</h4>
<h5>Position of staff member</h5>
<a class="button">Read more</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>