Table Not Obeying Container Heights - html

I'm working on a HTML page which I intend to use with PHP later however I have encountered some issues with the height scaling.
My tables and also the elements within the tables are not abiding by the height limits I have set within a container.
I do not want it to extend beyond the page as that would require a scroll bar. Anybody have any suggestions? (Other feedback is welcome)
Code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="summonerTable.css"/>
<link rel="stylesheet" type="text/css" href="navBar.css"/>
</head>
<body>
<div class="summonerContainer">
<div class="navbar">
</div>
<div id="gameDetails">
</div>
<table border="1" id="summonerTeams">
<tr height="100%">
<!-- Begin Definitions !-->
<td>
<table width="100%" id="summonerTeamsDetails" height="100%">
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Summoner Name
</p>
</td>
</tr>
<tr height="10%">
<td>
<table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<!-- <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
<td width="25%" bgcolor="aqua">
<img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
</td>
<td width="12%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg">-->
<td style="vertical-align:bottom;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg"> -->
<td style="vertical-align:top;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tor>
</table>
</td>
<td width="75%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<td bgcolor="black">
<p>
tryndamere
</p>
</td>
</tr>
<tr>
<td>
<p>
K/D/A: 1000/1000/1000
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Champion Games
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
KDR
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranking
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Series
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Runes
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Masteries
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranked Wins
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Normal Wins
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Show Champion Counters
</p>
</td>
</tr>
</table>
</td>
<!-- End Definitions !-->
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
</tr>
</table>
<div id="summonerMiddleBar">
</div>
<table border="1" id="summonerTeams">
<!-- Summoner Details Table (2) !-->
<tr height="100%">
<!-- Begin Definitions !-->
<td>
<table width="100%" id="summonerTeamsDetails" height="100%">
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Summoner Name
</p>
</td>
</tr>
<tr height="20%">
<td>
<table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<!-- <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
<td width="25%" bgcolor="aqua">
<img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
</td>
<td width="12%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg">-->
<td style="vertical-align:bottom;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg"> -->
<td style="vertical-align:top;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
</table>
</td>
<td width="75%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<td bgcolor="black">
<p>
tryndamere
</p>
</td>
</tr>
<tr>
<td>
<p>
K/D/A: 1000/1000/1000
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Champion Games
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
KDR
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranking
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Series
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Runes
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Masteries
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranked Wins
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Normal Wins
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Show Champion Counters
</p>
</td>
</tr>
</table>
</td>
<!-- End Definitions !-->
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
</tr>
</table>
<div class="footer">
</div>
</div>
</body>
</html>
CSS Code:
#charset "utf-8";
/* CSS Document */
html, body
{
height:100%;
width:100%;
font:"Courier New", Courier, monospace;
color:white;
}
.summonerContainer
{
width:100%;
height:100%;
padding:0;
margin:0;
resize:none;
}
#summonerTeams
{
width:100%;
margin:0;
padding:0;
table-layout:fixed;
padding:0;
margin:0;
border-collapse:collapse;
height:38%;
}
#summonerTeamsDetails
{
padding:0;
margin:0;
border-spacing:0;
}
#summonerTeamDetailsInterior
{
padding:0;
margin:0;
border-spacing:0;
border-collapse:collapse;
}
#summonerMiddleBar
{
background-color:#000;
color:white;
height:5%;
width:100%;
}
#gameDetails
{
background-color:aqua;
color:white;
height:5%;
width:100%;
}
p
{
font-size:1.5vw;
margin:0;
padding:0;
text-align:center;
}
body
{
padding:0;
margin:0;
}
#summonerImg
{
max-width:100%;
width:100%;
background-size:cover;
/*display:block;*/
}
#summonerImg2
{
max-width:100%;
width:100%;
background-size:cover;
/*display:block;*/
}
table
{
}
Other CSS Code:
#charset "utf-8";
/* CSS Document */
.navbar
{
background-color:#000;
color:white;
height:10%;
width:100%;
}
.footer
{
background-color:#000;
color:white;
height:4%;
width:100%;
}


Basically what is happening is that there comes a point at which the height of 5% for the table cell is too small for the text that is contained inside so, instead of disappearing it ignores the height of the container.
To workaround this you would have to use media queries to rearrange the table - though i recommend not using a table as it will make this bit easier - so that the height is of a size that wont create scroll bars.
See here for a tutorial on media queries: http://www.youtube.com/watch?v=fA1NW-T1QXc


I think the following lines should be corrected:
html, body {
color: white; }
Setting the text color to white is a bad idea as both the text and background would have the same color, making it impossible to read some text (like the AAAAAAAAAA) and also difficult for you to decipher errors easily.
To improve on markup, it is always recommended you seperate html and css code into files of their own. That also makes the code very easy to understand. In addition, you can always view all markup errors on the web console: ctrl+shif+k on most mordern browsers.

Related

Align table text side by side in html

Below is my html code in which I am trying to create a quotation form. I have added rate and below it I want to add the rates of each services.
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>
Browser Result
I want to set it to the right in line with Below are the services that you will be provided:
Any help would be highly appreciated

I found two issues:
two tags were missing: <a> and </table>
there was a colspan and a float that were unnecessary
So your example is working as expected:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
If you want "Rate" to be aligned right with a big gap between the two cells, you just need to give the nested table a width: 100%;:
#nested_table {
width: 100%;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table id="nested_table" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
I don't know why you are nesting the tables since you get exactly the same result without nesting and a little css for the table row:
#secondTable tr {
display: flex;
align-items: center;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>
...and width right alignment:
#secondTable tr {
display: flex;
align-items: center;
}
#secondTable td {
width: 50%;
}
#secondTable td p {
text-align: right;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>

Since you are using "h5" tag inside a "td" ;it create a margin , so you have to remove it:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr >
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5 style="margin-block-start:0; margin-block-end:0;">
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
<p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

Don't like tables approach, but starting from your snippet a possible solution is alter "Rate" td:
<td style="vertical-align:bottom;height:90px;">
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td style="vertical-align:bottom;height: 90px;">
<p>
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

You may be able to utilize display: flex or display: grid to achieve this. I don't have a snippet that you can copy/paste, but these links above have a few.

maybe this can help,
you want result like this ?
table {
flex-wrap: nowrap;
}
table h5 {
display: inline-block;
}
table table {
display: inline-block;
vertical-align: middle;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

Showing HTML page in one page without scrollbars, no matter the screen size

I am making a HTML email that a clients suddenly want to be shown as a one-pager without scrollbars. I have edited the wrapper to 'height:100vh', but it still has scrollbars.
I want to know, how would i go about and make this page appear as a one pager without scrollbars in all different screen heights?
<body>
<table width="100%">
<tbody>
<tr>
<td class="wrapper" width="600" align="center">
<!-- Header image -->
<table class="section header" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column center">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/header2.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="section main" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table style="margin: 0 auto;">
<tbody>
<tr>
<td align="left">
<img src="./media/main-image1.png" alt="picsum" width="600"/>
<br>
<div class="firstparagraph">
<p class="comfortaaquote font40"> You will be OK... </p><br>
<span class="marck"> Sweetheart</span>
</div>
<br>
<br>
<p class="comfortaatext center2">A lady is reassuring her dog everything will be OK in the veterinary hospital in Hanoi, Vietnam while the vet nurse are busy working in the background</p>
<br>
<div class="buttons">
<div class="days-counter">
<img class="steps" src="./media/counter.png" alt="picsum" width="300" />
<div class="text-block"><p>14</p></div>
</div>
<img class="submit" src="./media/submit.png" alt="picsum" width="300" />
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- bottom part-->
<!-- footer part-->
<table class="section bottom" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/bottom.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
should i be targeting the height:100vh to the body or the wrapper?
thank you

Outlook Gaps in Layout

Working with provided HTML and I'm looking to figure out why there is a gap in Outlook 07,10,13. Renders fine in other Outlook versions. The gap varies between outlook version, but a gap nonetheless
Screenshot:
HTML Email for review:
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td height="10" colspan="3">
<p style="font-weight:bold; color:#0018A8; font-size:13px">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="10" height="6">
</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="border-style: none">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132">
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's
maiden name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please click here to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
</html>
The pasted example shows the gaps more extremely than I even see in litmus tests, but not showing in Chrome when I test the HTML locally.

FIX was to add inline CSS to the images and remove the <tbody>
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="padding:0;margin:0;display:block;border-style:none;">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
</table>
</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's maiden
name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please <a href="http://payments.53.com/forms/SubscriptionManagement"
target="_blank">click here</a> to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>

HTML breaking up in Outlook but renders well without breakup in browsers

I have developed an HTML mailer which has to render in outlook it work fine in all browsers but breaks when I render in Outlook. Please see the below link to get the code.
http://jsfiddle.net/Z8xFn/
<body>
<table class="mailer-document" cellpadding="0" cellspacing="0">
<tr>
<td class="header">
<img src="top green and blue lines.jpg" alt="header" />
</td>
</tr>
<tr class="content-bg">
<td>
<p class="welcomecontent">Hi <span class="username">KELLY DEANNA,</span></p>
</td>
</tr>
<tr class="content-bg">
<td>
<p class="welcomecontent"><span>Federation Request has been raised by</span>
<b>Renu V Menon</b> <span>and its in your cart for approval</span></p>
</td>
</tr>
<tr class="content-bg">
<td>
<p class="details">Following are the details of the request for your reference:</p>
</td>
</tr>
</table>
<table class="details-table" cellpadding="0" cellspacing="0">
<tr>
<td class="details-left" width="185px">
<span class="RequestID">
Request ID
</span>
</td>
<td class="details-right" width="auto">
<span class="Details">: 30147633 </span>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Associate ID
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: 394163 </p>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Project Name
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: Domain </p>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Domain Name
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: Domain#tech.com </p>
</td>
</tr>
</table>
</body>

In your table, tr and td tags add:
border="0"
and add this into your head:
<style type="text/css">
table {border-collapse: collapse;}
</style>
I hope this helps :)

Canvas inside table

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.