I am making HTML emails and I would like to preview them in my browser before sending them, so I would like them to look similar in the browser and in the email client. I've tried several ways to set the width and height of my rows and cells:
<table height="500" width="200">
<tr>
<td height="100">TEST</td>
</tr>
<tr>
<td style="height: 100px;">TEST</td>
</tr>
</table>
No success at setting the height either through the HTML properties or the style properties. The cell covers the whole height of the table.
EDIT
Because it seems to be working on an blank HTML page I'm posting more of the code here. I'm actually using a Javascript on a PHP page to set the innerHTML property of a div. The full code of the function is:
function changeDivHTML()
{
begin = '<table width="595" height="842" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;">';
test = "<tr><td height=\"100\">Test</td></tr>";
testTwo = "<tr><td height=\"100\">Test</td></tr>";
end = "</table>";
parent.document.getElementById('divToChange').innerHTML = begin + test + testTwo + end;
}
The function is called and the innerHTML of the div changes fine. Everything is OK except the height of the cells is each 50%. They fill the whole table instead of taking 100px height each.
Setting the height in the tr tag has the same effect, which is no effect.
MORE INFO
This is the output on an empty HTML page. On my firefox browser the cells each take 50% of the height each. Covering the whole page instead of 100px
<html>
<head>
</head>
<body onload="window.print()">
<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr height="100"><td height="100">Test</td></tr>
<tr height="100"><td height="100">Test</td></tr>
</tbody>
</table>
</body>
</html>
I need to avoid using CSS for this, as I said it's HTML code generated for emails and email clients are not friendly to CSS.
Seems to be fine to me: http://jsfiddle.net/ZrKEV/1/
Only thing I can think of is that you missed out <table>...</table>
Try This Demo Here
<table height="500" width="200">
<tr><td height="100">TEST</td></tr>
<tr><td style="height: 100px;display:block">TEST</td></tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With