Join Chris Converse for an in-depth discussion in this video Styling the table row for the footer, part of Creating a Responsive HTML Email.
- View Offline
Now to work on the footer let's scroll down. Let's find our last table row here. Let's go into the exercise files. Let's open g-footer-row. At the top of this snippet let's come in here and copy the TD tag. Switch back to e-mail.html. Replace the first TD with this. Let's hit a Return, let's tab it, add content inside of the TD. Let's come back to the footer row snippet. Let's come down here and copy all of the content. So we have a copyright and maybe some sample text you might have inside of your message.
We also have some links to privacy and unsubscribe, with inline styles, coloring those black. Let's copy this to the clipboard. Switch back to email.html and let's hit paste. Let me format this a little bit. So now this in place let me hit file save, let's come back out look at this in a browser. And if we scroll down to the bottom we can see the photo content in place. So now inside of the footer row, we have the TD set to the same background color as the table that centers our entire email. Which is also the same color that we put into the body background.
So now that the entire structure for our emails in place, next we're going to go back and style some of our anchor links to look like buttons.
This course was created and produced by Chris Converse. We are honored to host this content in our library.
- Creating the graphics
- Setting up the base layout structure
- Styling the table rows for the headline, banner, etc.
- Creating buttons
- Adding CSS media queries
- Styling the content
- Incorporating animation and web fonts
- Validating your code
- Testing in various email clients