Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

marsha grasett
marsha grasett
9,995 Points
Posted by marsha grasett
marsha grasett
9,995 Points

HTML Email - nested tables SOLVED

I can't seem to wrap my head around nested tables.

Could anyone suggest an additional resource?

(I need to "understand" this before I move on. :(

7 Answers

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

Just watched an old video on CSS-Tricks. Chris went through the build from the beginning. And I got it!!! yay

(I guess I was just having a problem with the deconstruction of an existing email in the treehouse project videos)

Fuad Adetoro
Fuad Adetoro
6,490 Points
Fuad Adetoro
Fuad Adetoro
6,490 Points

What can't you understand?

Kellie Etterman
Kellie Etterman
5,859 Points
Kellie Etterman
Kellie Etterman
5,859 Points

I tried to paste the code here but the editor ate my tags.... lol.

Okay click this link: http://codepen.io/anon/pen/kLBbf/

It is an example of how to nest a table. Basically, you just need to remember that your nested table has to go in a column < td >.

Let me know if you have anymore questions or need me to expand on this a bit. :)

ETA: After rooting around for an additional resource, I came across one for you to reference: http://templates.mailchimp.com/development/html

Kellie

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

I'd like to know more about the reason tables are nested to give more control in email design.

And a more visual example - like a wireframe sketch that shows the tables etc. - That's why I'm asking for an additional resource.

Thanks

Kellie Etterman
Kellie Etterman
5,859 Points
Kellie Etterman
Kellie Etterman
5,859 Points

The reason is to give more control and to have design continuity across all email clients. Some email clients do not render CSS and HTML the way a browser would. So using nested tables gives you more control over the continuity of the design. At least, that is the way I understand it. I hope this makes sense!

Here is an explanation from Campaign Monitor that backs up my statement: http://www.campaignmonitor.com/blog/post/2644/nested-tables-in-email-how-much-is-too-much/

I hope this helps! :)

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

Thanks Kellie,

The Project is taught by Fabio, a User Experience Designer and HTML Email developer at MailChimp. He explains the why.

I just wanted a different more visual approach (more images-less code-less words)

Kellie Etterman
Kellie Etterman
5,859 Points
Kellie Etterman
Kellie Etterman
5,859 Points

Okay, here is what I did:

http://codepen.io/anon/pen/kLBbf/

I made the main table background yellow and aligned it to the center. I also gave the main table padding all the way around so that you can see the separation between the main table and the two nested tables.

For the 2 nested tables, I aligned one left and the other one right.

This would be the start of a very basic two-column e-mail template where each column is the same width.

I'll keep digging to see if I can find anything else. :)