 |
Tables and Backgrounds in Email Marketing Director
When editing your message in EMD, you may want to change the background color,
and the page properties of the email to improve its appearance. While may web developers are moving to div tags and style sheets to
modify the look and feel of web pages, they do not always translate well to email, especially for email clients like Outlook and web
clients that have their own backgrounds and styles defined.
This is where you can also specify a back ground image if you want. The image will
be repeated and depending on the size, may appear funny when opened. Web based email clients like Gmail, Yahoo, and WindowsLiveMail
may not display your background image, so this feature is of questionable value, it might be better to specify a background image in
a table instead.
When you edit the HTML message in EMD, you will notice a button at the bottom of
the page that says "Page Properties." This is where you can modify the background color and the link properties of your message.
This area is also where you would access any style sheets that may have been imported into your message. To edit styles, click "Page
Properties" and then click "Edit Head Section."
When you open the Code View section of the HTML editor, you will notice that you
are simply editing a table, which is placed inside the HTML tags that you cannot see: that is what the "Page Properties" button manages.
To design an interesting email with columns and rows, you should insert additional tables into the main table. First, determine what
size and shape you want your email to be, then, find the table icon and click on it to open the table feature. Let's create a table
with a Header row, two columns in the body section, and a footer row.
- Click on the Table Icon
- Enter 3 in the rows field
- Enter 3 in the columns field
- Leave the rest of the fields alone for now and click Ok to insert the table
- Click code view
- Add the following to the table code:
<TABLE border=1 cellSpacing=0 align="center"
width="600">
This will align the table to the middle and stretch it across 600 pixels, a good
size
for email messages.
- To make the top row one cell, change the following code for the first table row <TR>:
<TR>
<TD colSpan=3>
</TD>
</TR>
You have to get rid of the additional TD tags in that row too, to prevent
the cells from pushing to the right.
- Repeat for the footer row and leave the middle row with three cells
- Start typing your text in the middle cell of the middle row, the row will expand the height for your text.
- To align your text to the top, type:
<TD valign="top">
</TD>
If you want a left or right column, you should decide how wide you want it,
but since you hard coded the whole table to 600,
you want to make the left or right column a percentage of the total.
- In the cell before, or the cell after the middle cell with the main body of your message, set the column width:
<TD width="30%" valign="top">
- Go back to the editor view and start typing, the text will expand the column up and down, but not left and right past the
set width percentage.
- To put some space between your text and the cell, adjust the cellSpacing:
<TABLE border=1 cellSpacing=10 align="center"
width="600">
This puts some distance between the text areas in two different cells in your message.
Finally, you may want to turn off the border around the table.
Simply find the border settings on the table and set it equal to zero (0).
This is just a mild primer on how tables work in EMD. To find out more about how
to manipulate tables with HTML code, please visit W3CSchools.com
Return
to Articles |
