Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This video shows common layout and spacing problems you might encounter as you code HTML email, along with solutions. The main layout problem people find when they test their emails have to do with gaps and the alignment of their tables. Both of these issues, gaps and alignment, can be addressed with the HTML table code. All HTML tables that you create, for example, should have this set of code as a model. For example, every instance of table that you use, you should set border = 1 while you are designing and coding the layout.
You should set cellpadding to zero and the cellspacing to zero, and you should define the width. In addition, when you create your table data cells, you should set the valign, or vertical align, to top. You should set your align, in this case it's to left, but in some cases it may be to the center or to the right. And you also absolutely, at the TD level, should set the width; this will help with most alignment issues. In addition, sometimes you'll see gaps around images in older email software.
Specifically, you might have your code this way with the table data cell opening and defined on one line, your image on the next line, and the close of the table data cell on the next line. This looks nice and clean and is fairly easy to maintain; however, some older software will add a gap underneath the image to account for the table data cell being underneath the image. The way to correct that if you find it in your testing is to simply turn this into a single string of code, like this.
It looks more complicated, it's a little bit more difficult to maintain, but it will fix the gap underneath an image. The other issue people find with images can be resolved with these two style declaration: setting border equal to None and display the block. Specifically, Hotmail will add a gap if you don't set display to block for images. Finally, for layout issues, if you are trying to get pixel-level control, you may find that you need to remove your paragraph tags, your p tags, and move the style declarations up into the nearest table data cell, as we show here.
Here is the text that would normally be wrapped in p, or paragraph, tags, in HTML, and here's a style declaration for the font that normally would be in those paragraph tags. Instead, we've moved it up to the table data cell. Layout problems with an HTML email often can be identified easily when you set the HTML table border to 1. This lets you x-ray your table rows and columns. For example, you can also see gaps underneath images if you can see where the bottom of the table row is.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.