Tables

look

like

this

by

default

	You can make table cells look like they overlap each other
♦		♦
Note that HTML Email Check flags colspan and rowspan attributes on table cells as problomatic.
♦	This layout is very stable, across the different email clients.	♦

This is how to do a full bleed table, with a fixed-width content block inside. This layout is very stable, across the different email clients.

You might have read that you can't use float for layout in HTML emails. This is true, but float has a lot of similarities with the align attribute. This was design in order to allow text to flow around an image (see right) or table (see below). Like float, it takes the values left or right. This technique is very stable, across the different email clients. Pellentesque arcu velit, hendrerit et mauris vel, pretium euismod eros. Pellentesque luctus velit finibus neque egestas pretium.

This trick also works for tables themselves, which can float like images do. You can wrap text around a table using the align attribute. This layout is very stable, across the different email clients. Pellentesque arcu velit, hendrerit et mauris vel, pretium euismod eros. Pellentesque luctus velit finibus neque egestas pretium. Aliquam lacinia, metus eu sagittis faucibus, ante justo blandit justo, non facilisis nisi neque at risus. Cras non urna fringilla, cursus nulla in, molestie tellus. Duis auctor odio consectetur neque scelerisque fringilla. Praesent ultricies id nisi sed posuere. Aenean non velit ut ante facilisis rutrum eu at ante. Aliquam porta dignissim magna, non ornare dui. Vivamus odio mauris, hendrerit vel dolor a, varius dictum velit. Quisque aliquet sapien in gravida cursus.

¤	You can fake a fancy bulleted list using a table
§	Put a HTML entity in the first table cell and your text in the second
°	Remember to put valign="top" on the table row, or the bullet will always sit in the middle of the text, if it wraps
º	This layout is very stable, across the different email clients
⊕	Nam finibus est ut tristique vulputate. Aenean tempus nunc sodales neque fringilla elementum. Duis aliquam mi a sem fringilla ultrices
⊗	Nam tristique laoreet nisl, eu feugiat dolor molestie non. Phasellus sem velit, volutpat sed aliquet at, maximus quis massa
Φ	Sed vulputate rutrum tellus, sit amet vehicula massa egestas quis. Fusce sodales dolor ac risus sagittis, non fringilla risus pharetra. Proin in ligula varius nulla dignissim lobortis
♥	Nullam ligula dolor, consectetur sit amet eros sed, aliquam facilisis mi. Cras rutrum augue a ante auctor, vitae placerat lorem volutpat. Praesent nec dui tempor, semper ipsum quis, maximus sapien

You can make a table look a bit like a drop-shadow.

	Note that on old browsers, if you have an empty td element (i.e. one withouth a non-breaking space inside), then the background colour will not render. However, adding a non-breaking space will tend to make cells larger than 10 pixels in size (even with small tags or font tags with a size of 1). We used to add a spacer gif (a one pixel, clear gif) inside such cells, in order to force the background colour to render. This current version is untested.

Perhaps don't bother using a fieldset

That image on the left there is aligned to the left, has a border attribute of 1 and has the hspace attribute set to 10. Unfortunately, hspace and vspace add horizontal and vertical space onto both sides of an image. Border, on the other hand, takes the colour value of the text attribute on the body tag (which defaults to black). You can use the font tag with the color attribute to change the colour of the border added around the image, like this image on the right here (it's the exact same image). You can also control the size of the border with the border attribute on the image.

Both the border and the border colour are ignored by Mail, under Windows 10.

Unfortunately, many email clients will not draw a border around the fieldset, or even render the legend element within it..