I'm working on a school project, where we have to design a website with html 4.01 and must not use CSS at all. My Question is, how can I expand a table over the whole window height? I have tried the height attribute with a percantage value, but it didn't work. I couldn't find any good solutions for my problem since all of them used inline CSS or the style tag.
here is my code:
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
If you specify the version as HTML5 and try to set height="...", it won't work. Since in HTML5 there isn't a height-attribute for table, it will be ignored.
Without CSS, the best you can do is:
Try deleting: <!DOCTYPE html>
and then add: height="100%" to <table>.
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table height="100%" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
When I run it on Firefox or Chrome, it works just fine.
You should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100%.
body, html {
height: 100%;
}
table {
height: 100%;
}
Related
I am creating a newsletter for email, and i add background image for newsletter but the background image is not showing of table in email. I need to give the online path of an image. Is there is any mistake in code?
Please help me.
Here is my code:
<style type="text/css">
.position{
font-family:century gothic !important;
font-size:20px;
color:white;
font-weight:bold;
text-decoration:underline;
line-height:1.2;
}
.location,.condition{
font-family:century gothic !important;
font-size:17px;
color:white;
}
.apply_info{
font-family:century gothic !important;
font-size:20px;
color:black !important;
}
</style>
</head>
<body>
<div class="container">
<table border="0" width="100%" background="http://i67.tinypic.com/i69xzq.jpg" class="tbl_wrapper" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%">
<tr>
<td>
<table width="100%">
<tr height="162px"></tr>
<tr>
<td colspan="2">
<table width="100%">
<tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">NOW</td></tr>
<tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">HIRING</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td style="text-align:right">
<table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
<tr>
<td>JOIN THE TEAM</td>
</tr>
</table>
</td>
<td width="200px" height="20px" bgcolor="red"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td width="200px" height="20px" bgcolor="red"></td>
<td style="text-align:left">
<table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
<tr>
<td>OPEN POSITIONS</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td class="position" colspan="3">IT Support</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">(Freshers can also apply)</td>
</tr>
<tr>
<td class="position" colspan="3">OPS Executive</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi & Jaipur</td>
</tr>
<tr >
<td class="condition" colspan="3">(Freshers can also apply)</td>
</tr>
<tr>
<td class="position" colspan="3">Data Base Expert</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
</tr>
<tr>
<td class="condition" colspan="3">Experience 3-5 Years</td>
</tr>
<tr>
<td class="position" colspan="3">Full Stack Developer</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
</tr>
<tr>
<td class="condition" colspan="3">Experience 5-7 Years</td>
</tr>
<tr>
<td class="position" colspan="3">Sales Executives/Manager</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">Experience 3-5 Years</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="160px"></tr>
<tr>
<td>
<table border="0" width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td width="400px" height="20px" bgcolor="red"></td>
<td style="text-align:center">
<table width="100%" style="font-size:30px;color:red;font-family:century gothic">
<tr>
<td>APPLY NOW</td>
</tr>
</table>
</td>
<td width="400px" height="20px" bgcolor="red"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr><td class="apply_info">rashmi.bhattacharjee#axestrack.com</td></tr>
<tr><td class="apply_info">44E/9 First Floor, Kishangarh, Vasant Kunj, New Delhi-110070</td></tr>
<tr><td class="apply_info">Phone-8373902513</td></tr>
<tr><td><img src="http://i67.tinypic.com/rmk8ev.jpg" class="img-responsive center-block" style="height:80px" /></td></tr>
</table>
</td>
</tr>
</table>
</div>
Your image link is wrong, "http://i67.tinypic.com/rmk8ev.jpg" your link redirects to the tinypic.
Instead you should grab the image source link, which in your case would be "http://oi67.tinypic.com/rmk8ev.jpg"
This isn't a good practice, you should host your own images on your servers since tinpic can remove it.
I can't actually see the background-image in your CSS/HTML, which makes it hard to diagnose your specific issue.
But nonetheless, you will experience issues with background images when rendering in various email clients. Here's a comprehensive article on the topic, written by Litmus: https://litmus.com/community/learning/25-understanding-background-images-in-email
As mentioned in the article, the 'Bulletproof background images' tool at https://backgrounds.cm/ is really useful and includes VML code which will render background images in problem versions of Outlook.
Few things to try that piggyback on a few others answers here.
Update the image reference path to be http://i67.tinypic.com/i69xzq.jpg
Move the inline CSS for the background image down a few levels to a <td>.
Use background="http://i67.tinypic.com/i69xzq.jpg" (like you are), or try `style="background-image: http://i67.tinypic.com/i69xzq.jpg;". Avoid CSS shorthand.
Use Backgrounds.cm to generate VML code for Outlook.
<body>
<div class="container">
<table border="0" width="100%" class="tbl_wrapper">
<tr>
<td background="http://i67.tinypic.com/i69xzq.jpg" bgcolor="#ffffff" valign="top" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%"">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="http://i67.tinypic.com/i69xzq.jpg" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%">
<tr height="162px"></tr>
<tr>
<!-- Email Content -->
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
This should give you pretty good coverage across email clients!
Mailchimp is so frustrating. I'm trying to make a campaign with the template that I did. It's supposed to look like this:
BUT when I'm trying to paste a table that I copied from google sheets, it's looking like this
How do I fix it? How can I make the borders disappear every time I'm going to paste a table?
If you're wondering this is the source code (I removed the content because it's classified and it exceeded the 30,000 characters limit):
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
</style>
<table border="1" cellpadding="0" cellspacing="0" dir="ltr">
<colgroup>
<col width="277" />
<col width="100" />
<col width="100" />
<col width="113" />
<col width="114" />
<col width="49" />
<col width="79" />
<col width="2" />
<col width="100" />
<col width="100" />
</colgroup>
<tbody>
<tr>
<td data-sheets-value="{"1":2,"2":"AS OF: 8/29/16"}">AS OF: 8/29/16</td>
<td colspan="6" data-sheets-value="{"1":2,"2":"DIGITAL CARDS / CODES\n Official Pins or Scans with Text"}" rowspan="1">DIGITAL CARDS / CODES<br />
Official Pins or Scans with Text</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"PHYSICAL CARDS\n Free shipping on 500+ units"}" rowspan="1">PHYSICAL CARDS<br />
Free shipping on 500+ units</td>
</tr>
<tr>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"< 100 Units"}" rowspan="1">< 100 Units</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"100+ Units\n Call/Email for pricing on 1000+ units per item"}" rowspan="1">100+ Units<br />
Call/Email for pricing on 1000+ units per item</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Format"}" rowspan="1">Format</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Call/Email for pricing\n on 1000+ units per item"}" rowspan="1">Call/Email for pricing<br />
on 1000+ units per item</td>
</tr>
<tr>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Pins"}"> </td>
<td data-sheets-value="{"1":2,"2":"Scans + Text"}"> </td>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]" data-sheets-value="{"1":3,"3":10}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.15}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.085}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
<td data-sheets-value="{"1":2,"2":"\u25cf"}"> </td>
<td> </td>
<td> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
table border applied change border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
Step 1: set each <table> to border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
Step 2: delete the commented-out td {border: 1px solid #ccc;}
You should now have no borders anywhere, so go back and add only the borders you want with inline styles on either <td>s (best) or <table>s. Eg:
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td style="border-top: 1px solid #ffffff;">
content
</td>
</tr>
</table>
This should produce an email with no unintentional borders anywhere. I'm not sure what pasting from Google Sheets is like, but you'll want to edit the HTML in this way to make sure it displays correctly.
I am creating an HTML Email and am struggling getting images to render in Outlook and Gmail. I have the usual problem of extra space being added between table rows in Gmail however assigning block to the display style of the images like this:
style="display:block;"
does not work. The only fix I managed to find was to set line height to zero on all the td elements:
<td style="line-height=0">
but when I do this Outlook then cuts off all the tops of my images! Are there any other fixes I could use ??
----EDIT------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
img
{
display:block;
}
</style>
</head>
<body style:"margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-spacing:0;border:0">
<table align="center" cellpadding="0" cellspacing="0" width="200"
border="0" style="border-collapse:collapse;background-color:black;padding:0;border-spacing:0;">
<tr style="display:block;">
<td style="padding:0;border:0;border-collapse:collapse;width:20%;margin:0;">
<img src="http://test..co.za/Custom//images/EMail_logocrop.png" style="display:block;"/>
</td>
<td style="color:White;">
If you are having trouble viewing this email click here
</td>
</tr>
<tr style="display:block;line-height:0;">
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_logo.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_bet.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_stand.jpg" style="display:block;">
</td>
</tr>
<tr>
<td colspan="2" style="width:100%;line-height:0;">
<img src="http://test..co.za/Custom//images/EMail_games.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;" >
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop2.png" style="display:block;" />
</td>
<td>
<img src="http://test..co.za/Custom//images/EMail_pslcrop.png"/ style="display:block;">
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop3.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_chelseacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop4.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_cricketcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop5.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop6.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroppsl.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop7.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropchelsea.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop8.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropt20.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop9.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop10.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_sharkcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop11.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_arsenalcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop12.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_ligacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop13.png" style="display:block;"/>
</td>
</tr>
<tr style="padding:0px;">
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop14.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropshark.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop15.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroparsenal.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop16.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropliga.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop17.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="7" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop18.png" style="display:block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left:10px;">
<img src="http://test..co.za/Custom//images/EMail_footer.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_grasscropbottom.png" style="display:block;"/>
</td>
</tr>
</table>
</table>
Use this for your images:
style="margin: 0; border: 0; padding: 0; display: block;"
That will prevent any spacing around them. If the spacing persists, it is because of the table itself, and in particular the extra (bad word here) Microsoft inserts.
Are you sending/forwarding from Outlook to Gmail? The gaps are unavoidable if that is the case. See similar question here. Note that tables next to tables (in the code, but stacked on page) make bigger gaps than table rows, and by setting the color on a wrapping parent element, you can hide the 'line' created when they separate.
You have a bunch of extra stuff in your code you don't really need. Just put table td {border-collapse: collapse;} in your style tag then all you need is this:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Just note that table cells need to be a min of about 19px as that is the min-height it can be in Outlook. I prefer to design around that, but some people mess with line-height tricks also.
Have you looked into using http://htmlemailboilerplate.com/ - it helps eliminate many of the problems that you are faced with when building HTML emails.
It will help normalise the email across many clients and just leaves you to do the actual building.
I'm trying to put together a simple HTML email using old school coding standards and I've hit a brick wall that I didn't foresee. Internet Explorer, even IE 11, renders a simple table differently to every other browser I've tried (Chrome, Firefox, Safari) and I can't figure out why.
In terms of layout, it should look like this (note: colours are for illustration only -- apologies to your eyes!):
But in IE it looks like this:
The HTML is pretty simple:
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
Height: 42px
</td>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
Height: 116px
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
</tr>
<tr>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
Height: 208px
</div>
</div>
</td>
</tr>
<tr>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
Height: 134px
</div>
</div>
</td>
</tr>
</table>
JSFiddle: http://jsfiddle.net/mCLDh/
Am I doing something wrong, or is IE still messing with me after all these years?
(Note: For the commenters who are unaware, you cannot use floats or absolute positioning in HTML emails. That's why I'm using code that looks like it came from 1998. It's ugly, but it's more supported by email clients.)
What you are experiencing is the rowspan version of the Outlook issue pointed out here.
Nested tables are the logical choice, however, you can get your code working by adding empty cells on the left to enforce the row heights, making Outlook behave as expected.
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="42" width='0'><!-- Empty cell for outlook -->
</td>
<td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
Height: 42px
</td>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
Height: 116px
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
</tr>
<tr>
<td bgcolor="#ff0000" valign="top" height="74" width='0'><!-- Empty cell for outlook -->
</td>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
Height: 208px
</div>
</div>
</td>
</tr>
<tr>
<td bgcolor="#ff0000" valign="top" height="134" width='0'><!-- Empty cell for outlook -->
</td>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
Height: 134px
</div>
</div>
</td>
</tr>
</table>
Your best bet is nested tables
http://jsfiddle.net/3L8qL/1/
like so
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="250" width='30'>Height: 250px</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">Height: 42px</td>
</tr>
<tr>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" >
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">Height: 208px</div>
</div>
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" >Height: 116px</td>
</tr>
<tr>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">Height: 134px</div>
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30'>Height: 250px</td>
</tr>
</table>
Edit:
Here's why the browser was confused.
You have created a table with 3 total rows. The sum height of all three rows is 250px.
In the second column, the first row is 42px, and the sum of the bottom two is 208px
In the third column, the first two rows is 116px, and the third row is 134px.
Which means that (table wide) the first row is defined at 42px, the third row is at 134px but the middle row is ambiguous at 166px, 92px, AND -18px at the same time.
Tables are meant to be tabular, but when you break the nature of the table, it's a crap shoot on what you'll get.
Ok, since you stated that it will be used for a html e-mail: do NOT use colspan, rowspan. split the table up in: (not it is NOT pretty but it will save you a metric shit-ton of problems)
<table>
<tr>
<td>
250px
</td>
<td>
<table>
<tr>
<td>
height 42px
</td>
</tr>
<tr>
<td>
height 208px
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
height 116px
</td>
</tr>
<tr>
<td>
height 134px
</td>
</tr>
</table>
</td>
<td>
250px
</td>
</tr>
</table>
(correct me if this can be done more easy, and yes, the inner tables can be replaced with divs.)
oh, and a shout out to ZURB for coming up with INK: http://zurb.com/ink/ (saved me heaps of trouble)
Interesting, must be minimum size thing, because if you make that value larger, it will render the same as others -- try 200 for example. But, IE doesn't make it smaller since it wants it to be the same height (or larger) than the next column.
I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?
You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.