I'm fighting with bad support of html clients for CSS and I need to do a email template with table layout. I just can't place and align tables within tables correctly. I tried it with valign etc. but this doesn't work...
How can I place one table within another table on top and in the center?
To illustrate I've posted this fiddle: http://jsfiddle.net/eabJh/1/
The <td >Another nested table</td> is in center position but not on top but in the middle.
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body style="background-color: black">
<table background="http://i3.mirror.co.uk/incoming/article276604.ece/ALTERNATES/s615/tweet-that-ricky-gervais-jibe-at-mongs-pic-twitter-com-rickygervais-132840776.jpg" width="810" border="20" bordercolor="white" style="border-style:solid; border-spacing:0px; border-collapse:collapse">
<tr style="height:400px">
<td>test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td >Another nested table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
</html>
Use valign = "top":
<td valign = "top">test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td>Another nested table</td>
</tr>
</table>
</td>