HTML Email - 2nd one

Hi All,

Happy New Year. It’s been awhile since I posted. Hope ya all had a wonderful holiday.

I’m working on my 2nd html email (Hi Ralph :D). The first one worked like a charm. To recap…this is what I did.

Perhaps the best thing to do here is create one big image in Photoshop with all the bits where you want them (one big background image with the link images placed appropriately). Then slice the image up in six or so parts: a top section with no links that could go in a single-cell header row; three images for a middle section, each image with its own row cell around which an anchor tag could be wrapped; and two images for the bottom two links, which would go in a two-cell row.

I’m doing the same thing but I’m kinda having a minor problem with the alignment this time. It appears ok on my pc but not on others. I have 3 single horizontal rows followed by a 3 column below and the bottom part is another single horizontal row. The first 3 & the bottom one appears aligned vertically on all computers and email readers like gmail, yahoo, MS outlook etc. but I can’t get the 3 column one to align to the rest so that it is viewed properly by all computers.

I’m still using DW CS4. (My boss finally decided to purchase the program after our trial version ended and the 1st html worked so wonderfully) He’s not going to be happy about this one, that’s for sure.

Help please!


may be if you would show some code then someone can answer you.


Yeah, we need to see some code.

Basically, I start with a table of 100% width, like so:

<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="">

Then within it I make each row a separate table. E.g.

<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="" align="center">

A (table) row of more than one column looks a bit like this:

<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="" align="center">
            <td width="200" valign="top">
            <td width="200" valign="top">
            <td width="200" valign="top">

A bit of a disaster in terms of standards, of course, but that’s html email for you. :rolleyes:

If you’re suggesting to use nothing but images for the email I would advise against that. Make sure there’s meaningful text content in there for people who can’t view images or simply don’t want to.

Hi Guys,

Thanks for all your reply.

I will try what you suggested Ralph. As you know, I don’t have coding background so I’m doing this on a trial and error thing plus you guys are so helpful. I’ve managed to delete the old file I did by accident (out of frustration) so I will recreate one again. I will post the code later.

Since I started this html email thing 2 or 3 months ago, I’ve been trying to explain about the CSS and how having images for the entire file is not a good idea for html email - BUT my boss is dead set on this particular layout which is impossible not to have CSS incorporated into it. So I had to resort to the “sliced” up images…thank you Ralph!



I tried the sample code you gave and it worked. Everything’s aligned now horizontally and vertically. I’m still going to have my other officemates test it on their home pc and web base email but so far here in the office, everything seems ok. It’s the “valign” thing that did it (I think ?)

I always use the Design mode on DW and put the images together and have DW generate the code automatically. When I have the codes, I adjust the sizes accordingly and did the “valign” thing you suggested, and everything’s ok now.

THANK YOU SO MUCH! You have really been very helpful.:weee::weee::weee:

Great, glad it worked. That layout is pretty reliable across email clients. If you need any little tweaks, just post back (preferably with a link–or send me the email) as there are other tricks to dealing with various email clients.

Very interesting - been trying to sort this one out for quite a while. A couple of things. Are you saying that you would put multiple tables within one table, and put your text, (assuming in the center td), somewher in the inner tables ?

Also, I notice your bgcolor is blank ? Is that because it’s got more chance of getting through like that ?


Yes. The outermost table is really for the main background color. The inner tables (acting as rows) hold text, images etc.

Also, I notice your bgcolor is blank ? Is that because it’s got more chance of getting through like that ?

No, I just deleted the color value to simplify the code. :slight_smile:

Thanks Ralph, I have been struggling with this for a while. One thing, and I can’t remember which email website it was, but don’t one of them have a prob with nested tables ?

Generally it’s better not to nest tables. The only time I do it is with an outer table 100% width to establish bg color (if needed) and then nested tables for the rows. But that’s only one level of nesting, and I’ve not had any trouble with it in any client.

As I said, for the rows I use separate tables. It is especially good to avoid colspans, and this makes that possible.

Many thanks Ralph, have you come across a workable limit to the amount of tables, that you put into that outer table please ?

Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, that will always give you the best result across the buggier email clients.

Here’s an indepth how to make HTML e-mail

No, although I would just avoid nesting any more tables within tables, if possible. But a simple bit of table code involves hardly any bytes at all, so I see no reason not to have quite a few, although it’s not advisable to have too long an email. Most people don’t even look at them at all (according to the statistics) so it’s probably better to keep them as short and to the point as possible.

Thanks Ralph, when you say ‘avoid nesting any more tables within tables’ - I assume you mean that you should avoid putting tables into tables, that are themselves within other tables - I’m fairly sure that’s what you’re saying, nut just want to be sure :slight_smile:

Thanks Luki for the info and excellent link - definitley saved that link to favs.

One thing, on that link, it says The most reliable way to set the width of your table is to set a width for each cell, not for the table itself. But then lower down, it says :

<table cellspacing="0" cellpadding="0" border="0" width="100%">


Also, what is whitespace, in this context please ? :

‘Where possible, avoid whitespace between your <td> tags’.


Yes, that’s right.

what is whitespace, in this context please ?

It means instead of this:


do this


White space includes any space added by the space bar, returns/enters etc.

Many thanks Ralph - all sorted now.

The helps been much appreciated.

Actually, just one other thing, and the subject of images has been covered slightly here, but I’ve noticed that when I include a (good) image, I get good responses, but the image is from a website, so that if the viewer is offline at that moment, they won’t see the image! Has anyone found a way of embedding an image in an html email, but in a way that the viewer would still see it, even if they weren’t online please ?

It’s possible, but not straightforward, and has its problems. This question came up in a recent thread, so I’ll just direct you to that: