Hi from pitch black warm York UK,
Got my self in a pickle trying to customize a mailchimp newsletter 
Basically the templates are great up the point you want something different. I need a 3 (ROWS) to 2 then a 3 to 1 layout if that makes sense.
But where do i start when i need to get my head around the archaic world to embedded tables
Thanks,
David
You’ll have to post an image / drawing showing what you want.
For email tables you can use nested tables to get the layout you want, where the outer table is like wrapper. Here’s a simple example:
<table width="600">
<tr>
<td>
<!-- 3 columns -->
<table>
<tr>
<td width="33%">Column 1</td>
<td width="33%">Column 2</td>
<td width="33%">Column 3</td>
</tr>
</table>
<!--2 columns -->
<table>
<tr>
<td width="50%">Column 1</td>
<td width="50%">Column 2</td>
</tr>
</table>
<!-- 1 column -->
<table>
<tr>
<td width="100%">Column 1</td>
</tr>
</table>
</td>
</tr>
</table>
Thank you @bluedreamer its been an age since ive looked at tables bit confusing but after a few coffees I’ll get there.
Thanks,
David
https://drive.google.com/file/d/0B-mDEggJbqxPVU5vT2NFeExibEE/view?usp=sharing
Hi @ronpat apologies for the delay. Above is a screenshot of a proposed eMail layout. I’m keen to be able to code this my self so i can upload the code into mailchimp but may be biting off more than I can chew!
The white blocks represent an image with text directly below.
Hope this helps,
David
It looks like 3 nested tables should do it, as @bluedreamer posted. You will want to swap the order to match what you have and give the sub-tables 100% width.
Ok yes, I’m going to chip away at this and update on this thread 
Hi, David.
First, a brief disclaimer… I have no experience writing HTML e-mail. I’ve written a few tables, though, so I think these will work for you.
Both of these very basic table layouts render properly in IE8, FF50, and Chrome49, with or without a doctype. I believe they will get you off to a stable start.
One layout puts the text in a separate row beneath the image. The other puts the text in the same cell beneath the image. Pick the one you prefer.
Widths must be precisely accounted for using the standard box model.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table template</title>
<!--
https://www.sitepoint.com/community/t/tables-and-html-newsletters-are-baking-my-noodle/243667/2
Nightwing
-->
<style>
/* visualize tables and cells */
table {border:1px solid #aaa;}
table table td {outline:1px solid #aaa;} /* outline, not border */
</style>
</head>
<body>
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- 1 column -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td>
<img src="http://placehold.it/576x200/" width="576" height="200" alt="" style="display:block;">
</td>
</tr>
<tr>
<td>
<p style="color:#000;margin:0">Column 1</p>
</td>
</tr>
</table>
<!--2 columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td width="50%" valign="middle">
<img src="http://placehold.it/282x200/" width="282" height="200" alt="" style="display:block;">
</td>
<td width="50%" valign="middle">
<img src="http://placehold.it/282x200/" width="282" height="200" alt="" style="display:block;">
</td>
</tr>
<tr>
<td valign="top">
<p style="color:#000;margin:0">Column 1</p>
</td>
<td valign="top">
<p style="color:#000;margin:0">Column 2</p>
</td>
</tr>
</table>
<!-- 3 columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td width="33.33%" valign="middle">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
</td>
<td width="33.33%" valign="middle">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
</td>
<td width="33.33%" valign="middle">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
</td>
</tr>
<tr>
<td valign="top">
<p style="color:#000;margin:0">Column 1</p>
</td>
<td valign="top">
<p style="color:#000;margin:0">Column 2</p>
</td>
<td valign="top">
<p style="color:#000;margin:0">Column 3</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table template</title>
<!--
https://www.sitepoint.com/community/t/tables-and-html-newsletters-are-baking-my-noodle/243667/2
Nightwing
-->
<style>
/* TEMPORARY. visualize inner tables and cells */
table {border:1px solid #aaa;}
table table td {outline:1px solid #aaa;}
</style>
</head>
<body>
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- 1 column -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td valign="top">
<img src="http://placehold.it/576x200/" width="576" height="200" alt="" style="display:block;">
<p style="color:#000;margin-top:8px;margin-bottom:0;">Column 1</p>
</td>
</tr>
</table>
<!--2 columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td width="50%" valign="top">
<img src="http://placehold.it/282x200/" width="282" height="200" alt="" style="display:block;">
<p style="color:#000;margin-top:8px;margin-bottom:0;">Column 1</p>
</td>
<td width="50%" valign="top">
<img src="http://placehold.it/282x200/" width="282" height="200" alt="" style="display:block;">
<p style="color:#000;margin-top:8px;margin-bottom:0;">Column 2</p>
</td>
</tr>
</table>
<!-- 3 columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<p style="color:#000;margin-top:8px;margin-bottom:0;">Column 1</p>
</td>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<p style="color:#000;margin-top:8px;margin-bottom:0;">Column 2</p>
</td>
<td width="33.33%" valign="middle">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<p style="color:#000;margin-top:8px;margin-bottom:0;">Column 3</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Wow impressive, this helps a lot in terms of me seeing embedded tables in action.
Now this next bit is for anyone who knows the headaches caused when you get articles of different word depth and alignment gets compromised. Below codepen link (If it works) And here is an illustration of the problem:
My Big question is… "Do you have to instruct your copy writter that all articles have to be the same letter count or is there a design fix to allow for columns of different letters counts to line up a bit like the faux column fix in css?
Thanks in advance,
David
That’s different. You are using a pair of nested tables side by side for two columns. This is making the row heights independent.
Much more sensible to keep to full width tables to keep a constant row height. Then only make another table if you need to change column numbers.
Hi, David. I can’t help but believe that you are already very familiar with table basics and that you are still leading up to a more complex layout question. Nevertheless…
This post demonstrates exactly what @SamA74 said.
If you want your articles aligned horizontally, then you have to layout your page so they are horizontally aligned in rows, not columns. Within the outermost table container, you can nest a table with x-number of columns and include as many rows as needed to hold that content, or you can stack individual tables with one row and x-number of cells in the row. Generally, I would recommend changing table models when the number of columns needed changes or the structure of the columns changes (different widths).
That top image in the screenshot is just a placeholder to say that there is a full width table at the top of the stack.
The next table contains two rows with three columns each. You can add as many rows of three columns within that one table as needed to hold your content. I would like to assume that your copywriter can place articles of apporximately equal length in cells in the same row so wasted white space is minimized, but it totally isn’t necessary.
Change tables when a new pattern of columns is needed.
You can separate the tables with margins, if more space between them is desired.
You DO have to be aware of the length of words and URLs especially in the three column layout. They will not wrap. Instead they will stretch the table’s width and it will look weirdly out of balance. Either reduce the font size or curtail the visible portion of URLs, or maybe there is another technique that will work with long words and URLs in e-mail. Dunno.
Screenshot then HTML.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table template</title>
<!--
https://www.sitepoint.com/community/t/tables-and-html-newsletters-are-baking-my-noodle/243667/2
Nightwing
-->
<style>
/* TEMPORARY. visualize inner tables and cells */
table {border:1px solid #aaa;}
table table td {outline:1px solid #aaa;}
</style>
</head>
<body>
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- 1 column -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td valign="top">
<img src="http://placehold.it/576x100/" width="576" height="100" alt="" style="display:block;">
</td>
</tr>
</table>
<!-- change table models when number of colums changes -->
<!-- 3 columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif;">Congratulations to the Winners!</h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif;">York Culture Awards 2016</h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">Actor Mark Addy joined Presenter, BBC Radio York’s Georgey Spanswick, to celebrate.... See who scooped an award >>></p>
</td>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif">We’re Going Dutch!</h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif">At Vakantiebeurs<br>11 – 15 January</h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">Vakantiebeurs is the biggest consumer and trade show in the Netherlands and we’ll be there next month flying the flag for York. Get involved in our new Dutch campaign>>></p>
</td>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif">Be Bang up to Date…</h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif">…On all Things Christmas…</h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">Get your free copies of the Christmas Festival Guide. Please link your website to <span style="display:block;font-size:.875em;"><a href="www.visityork.org/Christmas">www.visityork.org/Christmas</a></span></p>
</td>
</tr>
<tr>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif">Townhouse Mouse Award</h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif">Historic Houses Association Award</h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">HUGE congrats to Fairfax House for scooping the 2016 Frances Garnham Award for its innovative educational work. Read all about the Townhouse Mouse and his fellow mouselings>>></p>
</td>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif">Indie York</h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif">Puts small businesses on the map</h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">The York Independent Business Association is putting Indie York on the map; this new pilot aims to boost York’s independent retailers and trade. Get involved >>> www.indieyork.co.uk </p>
</td>
<td width="33.33%" valign="top">
<img src="http://placehold.it/184x174/" width="184" height="174" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif">Free Masterclass for HR Professionals - Tackling the Thieves of Time </h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif">Grays Court Hotel – 9 December </h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">Love or hate it, email can take over our lives… Learn how to help your staff be more purposeful with their days. Book your free place on this unique masterclass >>></p>
</td>
</tr>
<!-- insert more rows as needed -->
</table>
<!-- change table models when number of colums changes -->
<table width="100%" border="0" cellpadding="0" cellspacing="12">
<tr>
<td width="50%" valign="top">
<img src="http://placehold.it/282x200/" width="282" height="200" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif">Residents Festival</h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif">28 and 29 January – Deadline for taking part – NOW!</h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">Don’t miss this free opportunity to get visitors through your door! 20,000 residents take part in our annual York Residents Festival, sponsored by First. Email sue.frumin@makeityork.com </p>
</td>
<td width="50%" valign="top">
<img src="http://placehold.it/282x200/" width="282" height="200" alt="" style="display:block;">
<h1 style="font-size:1.25em;font-family:Arial,sans-serif">Intrigued by Google Analytics?</h1>
<h2 style="font-size:1.0em;font-family:Arial,sans-serif"></h2>
<p style="font-size:1.0em;font-family:Arial,sans-serif;color:#000;margin-top:8px;margin-bottom:8px;">Join this half day course on getting to grips with Google Analytics, so you can fully utilise this tool to benefit your business. Book here for Thursday 26 Jan 2017 >>> Book here fro Thursday 23 Feb 2017 >>></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sorry, but I cannot relate to the code written in MS Office. (The only Microsoft products that I own are O/Ss.) Is that a MailChimp requirement?
One method I have used (in the context of responsive tables, not Emails) is to enable hyphenation for smaller screens to cope with longer words.
I’m not sure what email client support is like for hyphenation.
Perhaps it could be applied to <a> elements, to only target URLs and keep words intact. One annoying side effect of hyphenation was that it would sometimes unnecessarily break words.
OK, I tried to avoid this question, but I can’t…why are the tables nested at all? Seems like overkill to me. They’re all the same width, with the same basic setup, only difference is the width of the columns.
In the image posted earlier, the different rows have different numbers of equal width columns, 1 column, 3 columns and 2 columns.
Trying to do that with colspans would be a bit of a nightmare.
Tables don’t strictly obey widths like ordinary blocks do. With tables, unconfined widths are treated like min-width… “they are only a suggestion”.
Everything is BETTER with MATH.
You need to think of the column count as the lowest common product of all the rows. So, in this case, 6. Then apply colspan attributes as if all your rows had six columns. You Don’t even have to worry about % widths.
<table border="1" width="100%">
<tr>
<td colspan="2">dd</td>
<td colspan="2">dd</td>
<td colspan="2">dd</td>
</tr>
<tr>
<td colspan="3">dd</td>
<td colspan="3">dd</td>
</tr>
<tr>
<td colspan="2">dd</td>
<td colspan="2">dd</td>
<td colspan="2">dd</td>
</tr>
</table>
Hope that helps.
It is a bit more straight forward than I thought. I must have been thinking that spanning so many cols when that number does not actually exist in the table, doesn’t work.
But it does.
So to get the 1, 3, 2 arrangement, it’s:-
<table border="1" width="100%">
<tr>
<td colspan="6">dd</td>
</tr>
<tr>
<td colspan="2">dd</td>
<td colspan="2">dd</td>
<td colspan="2">dd</td>
</tr>
<tr>
<td colspan="3">dd</td>
<td colspan="3">dd</td>
</tr>
</table>
I wish all newsletter emails were just plain text with links and no images.
I just want to mention there might be a problem using colspan when opened in some MS clients. Check these links to avoid the problem if your target uses older Ms Outlook.
A good guide: http://www.activecampaign.com/email-design-guide/
Outlook has an issue where if you put a colspan in the first row of a
table, it will mess up the widths of the subsequent rows. The work
around for this is that you need to specify your cell widths in the top
row, even if it is an empty row.
http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed
Just my two
Hi Ronpat thank you for your replies,
Just for info its MailChimp’s templates that are a pain in the ass. I thought maybe if i learnt table coding i could get round the off the shelf templates MailChimp rolls out.
Thanks,
David
A follow-up example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>template</title>
<!--
Based on @SamA74's and @dresden_phoenix's demos and @Eric_J's 2 cents.
https://www.sitepoint.com/community/t/tables-and-html-newsletters-are-baking-my-noodle/243667/17
-->
</head>
<body>
<table border="1" width="100%">
<!--
<tr>
<td>cols1</td>
<td>cols1</td>
<td>cols1</td>
<td>cols1</td>
<td>cols1</td>
<td>cols1</td>
</tr>
-->
<tr>
<td colspan="6">colspan6</td>
</tr>
<tr>
<td colspan="5">colspan5</td>
<td>cols1</td>
</tr>
<tr>
<td colspan="4">colspan4</td>
<td colspan="2">colspan2</td>
</tr>
<tr>
<td colspan="3">colspan3</td>
<td colspan="3">colspan3</td>
</tr>
<tr>
<td colspan="2">colspan2</td>
<td colspan="4">colspan4</td>
</tr>
<tr>
<td>cols1</td>
<td colspan="5">colspan5</td>
</tr>
</table>
</body>
</html>
Uncomment that first row and try again.
