Tables Solution

[00:00:00]
>> Rodriguez: So yeah, hopefully you all messed around with tables a little bit using this kind of boilerplate structure for your emails. So let's look at how I would actually code something like that relatively from scratch here. So I'm gonna go back into the starter and just as a refresher, we have the logo image up here, we have a heading, hero image, some copy of a nice big bulletproof button, and then our footer stuff down here.

[00:00:25]
So when I start building this out using tables, I want to think of each of these as an individual component in its own module that I'll be able to swap around for future emails as needed. So the first thing I'm gonna do is I like scaffolding this out, so I'm gonna go ahead and,

[00:00:44]
>> Rodriguez: I'm gonna comment this stuff that's there. So I'm gonna add that first table in here. So this is where something like Emmet is handy. You can just do table>tr>td, hit Tab and it'll scaffold that out for you. But we need to do here is override those default behaviors from browsers and email clients.

[00:01:08]
So we don't want borders on our table. So we'll set border to 0. We don't want cellpadding or cell spacing in our email, because that will add that additional white space around those different table cells, and we absolutely don't want that. We want to be able to control that on a per cell basis as needed.

[00:01:27]
So cellpadding will be set to 0. Cellspacing, again, will be set 0. I mentioned that the structure it's helpful and we start making things responsive to have an outer fluid table that's set to 100% wide. So we'll do that. And then we'll have a container table inside of that, that'll be fixed width.

[00:01:48]
And that's what we'll be targeting when we start making that response of using media queries later on. So I can take this, copy it, and then just go into that table cell. And adjust my spacing here cuz I'm a neat freak sometimes. And then this is where that container cable will set it to 600 pixels wide.

[00:02:12]
Attributes, you don't need to put PX in there. It's assumed that by default it's pixel. So if you want to override that with a percentage, then you'd use percent. But you don't need the PX in there, just use 600, weird little HTML quirk there. So you have your outer container table.

[00:02:29]
You have your inner fixed width table. And then each of these table rows and table cells will be its own component. So I'm gonna to that, and then we'll make, again, our logo will go up here. And that will be its own table row and table cell. After that, we'll have, again, our headline.

[00:03:00]
>> Rodriguez: We'll have the Hero image. I'm gonna use Emmet here to make things a little bit quicker. And we can just go down and do that for each of those components. Which is nice because as we start adding content to it, if we wanna swap the headline or create an entirely new kinda like article type section, we can just copy those components, paste it underneath the existing ones, and build out really quickly these more advanced layouts and structures for our email campaign.

[00:03:27]
I actually do you have a more fully developed version of this that follows that exact same structure, but it has the content filled out in here. I don't wanna do that all manually and waste everybody's time right now. So we can look at this. It's using the same stuff we've seen before.

[00:03:44]
We have this fixed width image for the logo. It doesn't need to be responsive. We have the h1 tag, our semantic markup for our headline. And then we have our hero image here, which is using that responsive by default image technique using max width, min width, and width on the image tag.

[00:04:03]
All that same content we've seen before, but now it's built out in this modular table based approach. I did mention that before when we were first starting in that starter document we were using a div as a container cell for our kinda universal styles that control the overall font family and size and color of our text.

[00:04:22]
That's largely gonna be your place in one of two ways. If you have this container table, you can set that for that entire table using an inline style, like we did here. If you have specific content, like the footer, then you could do that in the table cell itself.

[00:04:40]
So it's kind of like closest neighbor for that bit of content, that block that you're trying to style. So since these two paragraphs live inside of this table cell, we can do it on that table cell itself just using, again, that simple inline style. And we're using those same reliable CSS properties, like color, font size.

[00:05:00]
We can use margin and padding on that table cell as well. Padding tends to be a little bit more reliable for tables. Most email clients will respect padding on that table cell. But some of them, I think older versions of Outlook, won't respect to the margin property on table cells or on certain block level elements.

[00:05:20]
So padding tends to be a little bit more reliable if you want to make sure that white space works across the board. Since we're targeting all of this content, except for that footer, in our email campaign, we can apply those inline styles on the table itself. So again, we're just doing background color, the color, font family, font size, the line height, and margin and padding here.

[00:05:43]
Anything you wanna override, though, you can just do so on that table cell basis. So here we're adding some extra padding to this table cell, so that when things get a little bit smaller, we still have a little bit of space around the edges on smaller screen sizes.

[00:05:58]
We do that across the board to just have those equal so everything aligns properly. If you want to get into more specific targeting, then you can move down and drop down into that per element basis. So for paragraphs, again, we're adding this bottom margin and make sure there's a little bit of separation between our paragraphs.

[00:06:16]
If we want to do that to headings, we can. If we wanna target our buttons, then we would go down to that level and do our CSS or our VML, whatever we're using for that button on that element basis. So pretty straightforward version of this. Things get a little bit more complex, a little bit more heavily nested as we go into multiple column layouts.

[00:06:38]
So if we see this now and pop it open, again, same kind of email that we've been building. But before, we were seeing that layout completely break in the Outlook clients, so we were using that div and max width on that div. And it was breaking in Outlook.

[00:06:55]
But when we look at it now, since we're using those tables and Outlook understands those HTML tables and the fact that we're using that 600 pixel wide width attribute on that table, it will understand that we're trying to constrain that design and it'll render it properly. So Apple Mail looks great, as always.

[00:07:14]
But then as we start going through the Outlooks, you can see that everything's looking as intended. So we're not getting that blown out version of the email. Our images are constrained because we have that width attribute set. So that's, really, the main driving factor for why we use tables and email design is these Outlook clients.

[00:07:32]
Because they don't understand float based designs or more traditional kind of web design approaches to structuring our content. And that's why we have to fall back to this slightly more outdated, weirder approach to designing any kind of web page, which is using HTML tables. You can go through here and you can see it.

[00:07:52]
Again, we're using that deprecated center tag for our image up there. You still don't get the border radius stuff. But you do get this really robust and well defined layout, which is what we're looking for in our campaigns. We just looked at that single column tables document. It's up there on the GitHub repo and code pen for reference if you need to look at it.

[00:08:13]
But yeah, this will work really well across all email clients, and it's a nice reliable way to start coding your emails.