Nested table email layout

Developer
Massimo Cassandro
Size
2,355 Kb
Views
16,192
  1. Nested table email layout Previews
  2. Nested table email layout HTML Codes
  3. Nested table email layout CSS Codes

How do I make an nested table email layout?

Responsive email layout. What is a nested table email layout? How do you make a nested table email layout? This script and codes were developed by Massimo Cassandro on 09 November 2022, Wednesday.

Nested table email layout Previews
IQ Test

Nested table email layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nested table email layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table width="100%" bgcolor="#f7f7f7" cellpadding="0" cellspacing="0" border="0" id="background_table"> <tbody> <tr> <td>
<!-- end of background table start --> <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table"> <tbody> <tr> <td width="100%" height="10">&nbsp;</td> </tr> <tr> <td width="100%" bgcolor="#13B4D8" height="100"> Header </td> </tr> <tr> <td width="100%" height="10">&nbsp;</td> </tr> </tbody> </table>
<!-- 3 columns -->	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table"> <tbody> <tr> <td width="100%">	<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table"> <tbody> <tr> <td><!-- col 1 --> <table bgcolor="#B8ECB3" width="180" height="300" align="left" border="0" cellpadding="0" cellspacing="0" class="column_table"> <tbody> <tr> <td> Column 1 </td> </tr> </tbody> </table> <!-- end of col 1 --> <!-- spacing --> <table width="30" align="left" border="0" cellpadding="0" cellspacing="0" class="spacer_table"> <tbody> <tr> <td width="100%" height="15" bgcolor="#E59EDF">&nbsp;</td> </tr> </tbody> </table> <!-- end of spacing --> <!-- col 2 --> <table bgcolor="#B8ECB3" width="180" height="300" align="left" border="0" cellpadding="0" cellspacing="0" class="column_table"> <tbody> <tr> <td> Column 2 </td> </tr> </tbody> </table> <!-- end of col 2 --> <!-- spacing --> <table width="30" align="left" border="0" cellpadding="0" cellspacing="0" class="spacer_table"> <tbody> <tr> <td width="100%" height="15" bgcolor="#E59EDF">&nbsp;</td> </tr> </tbody> </table> <!-- end of spacing --> <!-- col 3 --> <table bgcolor="#B8ECB3" width="180" height="300" align="left" border="0" cellpadding="0" cellspacing="0" class="column_table"> <tbody> <tr> <td> Column 3 </td> </tr> </tbody> </table> <!-- end of col 3 --></td> <!-- spacing --> <!-- end of spacing --> </tr> </tbody> </table></td> </tr> </tbody> </table>
<!-- end of 3 columns -->
<!-- footer --> <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table"> <tbody> <tr> <td width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body_table"> <tbody> <!-- Spacing --> <tr> <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td> </tr> <!-- Spacing --> </tbody> </table></td> </tr> </tbody> </table>
<!-- end of footer -->
<!-- end of background table--> </td> </tr> </tbody>
</table>
<p><a href="http://www.sitepoint.com/tricks-building-responsive-email/">See article on Sitepoint</a></p>
</body>
</html>

Nested table email layout - Script Codes CSS Codes

body {	width: 100% !important;	-webkit-text-size-adjust: 100%;	-ms-text-size-adjust: 100%;	margin: 0;	padding: 0;
}
#background_table {	margin: 0;	padding: 0;	width: 100%!important;	line-height: 100%!important;
}
img {	outline: none;	text-decoration: none;	border: none;	-ms-interpolation-mode: bicubic;	max-width:100%;	height:auto;	display: block;
}
table td {	border-collapse: collapse;	vertical-align: middle;	font-family: Helvetica, arial, sans-serif;	font-size: 14px;	color: #000;	text-align:center;
}
table {	border-collapse: collapse;	mso-table-lspace: 0pt;	mso-table-rspace: 0pt;
}
table[class="body_table"] {	width: 600px;
}
table[class="column_table"] {	width: 180px;
}
table[class="spacer_table"] {	width: 30px;	height:30px;
}
table[class="spacer_table"] td { font-size:1px; line-height:1px; mso-line-height-rule: exactly;
}
@media only screen and (max-width: 480px) {	table[class="body_table"] {	width: 80%!important;	}	table[class="column_table"] {	width: 100%!important;	}
}
Nested table email layout - Script Codes
Nested table email layout - Script Codes
Home Page Home
Developer Massimo Cassandro
Username massimo-cassandro
Uploaded November 09, 2022
Rating 3
Size 2,355 Kb
Views 16,192
Do you need developer help for Nested table email layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Massimo Cassandro (massimo-cassandro) Script Codes
Name
PDF Flyer generator
JQuery UI Autocomplete for Bootstrap
Google maps circle method
SVG dinamyc chart
CSS sprites example
SVG embedding methods
Checkbox with SVG icon
Grumpicon demo
SVG example
SVG symbols demo
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!