Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting tr and td width and height for email and browser

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.

like image 349
Juicy Avatar asked Sep 18 '13 11:09

Juicy


2 Answers

Seems to be fine to me: http://jsfiddle.net/ZrKEV/1/

Only thing I can think of is that you missed out <table>...</table>

like image 29
SaturnsEye Avatar answered Oct 16 '22 05:10

SaturnsEye


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>
like image 113
Love Trivedi Avatar answered Oct 16 '22 05:10

Love Trivedi