Multi column table email example
Daisho Komiyama edited this page Apr 30, 2023
·
3 revisions
<!DOCTYPE html>
<html
lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
>
<head>
<title>Multiple Columns with Tables</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* GMAIL BLUE LINKS */
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* Universal styles for links and stuff */
a {
color: #229efd;
font-weight: bold;
}
a:hover {
color: #fd6350;
text-decoration: none;
}
a.button:hover {
background-color: #fd6350 !important;
}
/* Responsive styles */
@media screen and (max-width: 600px) {
.mobile {
width: 100% !important;
}
.block {
display: block !important;
width: 100% !important;
}
h1 {
font-size: 24px !important;
}
}
</style>
</head>
<body id="body" style="margin: 0 !important; padding: 0 !important">
<!-- Preview text for the inbox -->
<div style="display: none; max-height: 0; overflow: hidden">
This will be displayed underneath the subject line. Use it wisely.
</div>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
width="100%"
>
<tr>
<td align="center">
<table
border="0"
class="mobile"
cellpadding="0"
cellspacing="0"
role="presentation"
width="600"
style="
background-color: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 18px;
line-height: 36px;
margin: 0;
padding: 0;
"
>
<!-- Logo image -->
<tr>
<td align="center" style="padding: 20px">
<img
src="images/logo.jpg"
alt=""
width="40"
border="0"
style="
border-radius: 40px;
display: block;
margin: 0 auto;
"
/>
</td>
</tr>
<!-- Headline -->
<tr>
<td style="padding: 20px">
<h1
style="
margin: 0;
font-size: 32px;
text-align: center;
"
>
Who loves HTML email?
</h1>
</td>
</tr>
<!-- Hero Image -->
<tr>
<td style="padding: 20px">
<img
src="images/hero.jpg"
alt="Some descriptive alternative text"
width="600"
border="0"
style="
border-radius: 4px;
display: block;
max-width: 100%;
min-width: 100px;
width: 100%;
"
/>
</td>
</tr>
<!-- Body copy -->
<tr>
<td style="padding: 20px">
<p style="margin: 0 0 20px 0">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quasi necessitatibus
quidem nesciunt quas adipisci, cupiditate ad
a dicta illo sit quaerat expedita ipsam ut
rerum repellendus, cum porro, maxime animi!
</p>
<p style="margin: 0 0 20px 0">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quasi necessitatibus
quidem nesciunt quas adipisci, cupiditate ad
a dicta illo sit quaerat expedita ipsam ut
rerum repellendus, cum porro, maxime animi!
</p>
<p style="margin: 0 0 20px 0">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quasi necessitatibus
quidem nesciunt quas adipisci, cupiditate ad
a dicta illo sit quaerat expedita ipsam ut
rerum repellendus, cum porro, maxime animi!
</p>
</td>
</tr>
<!-- Button -->
<tr>
<td style="padding: 20px 0 60px 0">
<!-- CTA generated by buttons.com -->
<div style="text-align: center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://thebetter.email" style="height:60px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fillcolor="#229efd">
<w:anchorlock/>
<center>
<![endif]-->
<a
class="button"
href="http://thebetter.email"
style="
background-color: #229efd;
border-radius: 4px;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 60px;
text-align: center;
text-decoration: none;
width: 200px;
-webkit-text-size-adjust: none;
"
>This is a button</a
>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<!-- Two Columns -->
<tr>
<td>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
width="100%"
>
<tr>
<td>
<!-- Left column -->
<table
align="left"
border="0"
cellpadding="0"
cellspacing="0"
class="block"
role="presentation"
width="48%"
>
<tr>
<td
style="
padding: 20px;
line-height: 24px;
"
>
<h2
style="
font-size: 16px;
margin: 0 0 20px
0;
"
>
Heading Time
</h2>
<p
style="
font-size: 14px;
margin: 0;
"
>
Lorem ipsum dolor
sit amet,
consectetur
adipisicing elit.
Vitae obcaecati illo
atque impedit est
dolores enim fuga,
saepe recusandae
consequuntur
voluptatum aut
alias, nam
temporibus,
provident cupiditate
eligendi quis
voluptas?
</p>
</td>
</tr>
</table>
<!-- Right column -->
<table
align="right"
border="0"
cellpadding="0"
cellspacing="0"
class="block"
role="presentation"
width="48%"
>
<tr>
<td
style="
padding: 20px;
line-height: 24px;
"
>
<h2
style="
font-size: 16px;
margin: 0 0 20px
0;
"
>
Heading Time
</h2>
<p
style="
font-size: 14px;
margin: 0;
"
>
Lorem ipsum dolor
sit amet,
consectetur
adipisicing elit.
Vitae obcaecati illo
atque impedit est
dolores enim fuga,
saepe recusandae
consequuntur
voluptatum aut
alias, nam
temporibus,
provident cupiditate
eligendi quis
voluptas?
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer information: Always include an unsubscribe link! -->
<tr>
<td
style="
color: #888888;
font-size: 16px;
margin: 60px 0 0 0;
padding: 60px 20px;
"
>
<p style="margin: 0 0 20px 0">
You're receiving this email because you're
trying to make email better for everyone.
Good on you! Don't worry,
<a href="#">you can unsubscribe here</a> if
you'd like.
</p>
<p style="margin: 0 0 20px 0">
Email Sender - 48372 Murphy St., Someplace,
MI 93827
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>