Is it me or is gmail bulls**t?
On outlook/browsers my email is perfect but on gmail there is a space between 2 tables, WHY?!?
Picture: http://i.imgur.com/srJKBJZ.png
Please do not tell me cellspacing,padding or border space they are all already in the code. If you can help me I would really appreciate it. Thanks in advance!!
Code:
<body style="margin:0; padding:0">
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vyJu43v.png">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vSAgEXE.png">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/Ih5jtiC.png">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0">
<tr>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/9B9Wcit.png">
</td>
<td>
<p style="font-family:arial; color:#002d62;">The new Insight Snapshot newsletter from Opinion Matters is packed full of research<br/>and communication ideas to inform your next project. Featuring tips for data<br/>storytelling, ways to interact with your target audience through online quizzes and<br/>case study examples of recent international survey campaigns.</p>
<p style="font-family:arial; color:#002d62">Read online here or request a printed copy</p>
</td>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/lNwkYpL.png">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/79k0VgK.png">
</td>
</tr>
<tr height="70">
<td height="70">
<p style="font-family:arial; color:#002d62;">If you would like to speak to a member of the team regarding any of the features in<br/>the newsletter please call 0207 251 9960 or email newsletter#opinionmatters.com</p>
</td>
</tr>
<tr>
<td VALIGN = "bottom">
<img src="http://i.imgur.com/brGmdjG.png">
</td>
</tr>
</table>
<p style="color:#85808e; font-size:14px; text-align:center">Data Protection: We will not pass your details on to any third party or send you unsolicited mail. If you would like<br/>
to unsubscribe from this and any future mailings please unsubscribe here.<br/><br/>markettiers4dc trading as Opinion Matters. Registered office: Northburgh House, 10a Northburgh Street,<br/>London, EC1V 0AT. Registered in England & Wales No. 4308785 VAT number 783 037 913. CIPR Partner, ISO<br/>9001:2000 registered (Certificate Number GB7041)</p>
</body>
Now used to img tag with valign="top"
<img src="xyz.png" valign="top" />
as like this
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vyJu43v.png" valign="top">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/vSAgEXE.png" valign="top">
</td>
<td VALIGN="bottom">
<img src="http://i.imgur.com/Ih5jtiC.png" valign="top">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0">
<tr>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/9B9Wcit.png">
</td>
<td>
<p style="font-family:arial; color:#002d62;">The new Insight Snapshot newsletter from Opinion Matters is packed full of research<br/>and communication ideas to inform your next project. Featuring tips for data<br/>storytelling, ways to interact with your target audience through online quizzes and<br/>case study examples of recent international survey campaigns.</p>
<p style="font-family:arial; color:#002d62">Read online here or request a printed copy</p>
</td>
<td rowspan="4" VALIGN = "top">
<img src="http://i.imgur.com/lNwkYpL.png">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/79k0VgK.png">
</td>
</tr>
<tr height="70">
<td height="70">
<p style="font-family:arial; color:#002d62;">If you would like to speak to a member of the team regarding any of the features in<br/>the newsletter please call 0207 251 9960 or email newsletter#opinionmatters.com</p>
</td>
</tr>
<tr>
<td VALIGN = "bottom">
<img src="http://i.imgur.com/brGmdjG.png">
</td>
</tr>
</table>
<p style="color:#85808e; font-size:14px; text-align:center">Data Protection: We will not pass your details on to any third party or send you unsolicited mail. If you would like<br/>
to unsubscribe from this and any future mailings please unsubscribe here.<br/><br/>markettiers4dc trading as Opinion Matters. Registered office: Northburgh House, 10a Northburgh Street,<br/>London, EC1V 0AT. Registered in England & Wales No. 4308785 VAT number 783 037 913. CIPR Partner, ISO<br/>9001:2000 registered (Certificate Number GB7041)</p>
What is Vertical Align
have you tried using margin-top:-5px for second table , i think this should remove the space .
Related
I am facing a very annoying issue regarding HTML mails. My mail template is working absolutely fine with all browsers and it is showing perfectly fine in gmail, office mail (web). But with outlook client I am getting 4 pixel extra padding.
I have checked the compute section where I can see the image size which I have defined and actual size in mail are different.
Here I am attaching the problematic part screenshot for your reference.
Could you please help me on it.
HTML Code
<table width="859" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="180"><img src="/sites/default/files/img/report_mail_header.jpg" alt="" /></td>
</tr>
<tr>
<td height="136"><img src="/sites/default/files/img/report_mail_title.jpg" alt="" /></td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f9f9f9">
<tr>
<td colspan="3" height="58"><img src="/sites/default/files/img/box1.jpg" alt="" /></td>
</tr>
<tr>
<td width="111" height="354"><img src="/sites/default/files/img/box4.jpg" alt="" /></td>
<td valign="top">
<table width="90%" cellspacing="0" cellpadding="5" border="0" align="center">
<tr>
<td align="center" style="font-size:18px;line-height:135%"><br><br>Details of the accounts that are part of our community of ****<br><br>Account status: <font color="#1f6d79">active or inactive institutions</font>
<br>Details of the <font color="#83babc">institutions that are really reporting</font>
<br>The details of the <font color="#1f6d79">accounts that entered to the platform the last month</font>
<br>As you know, "*** **** ****" is an initiative to create value to our customers - Leading our team to gain differentiation and loyalty
<br><strong><font color="#1f6d79">Best Regards,<br>**** ****</font></strong></font>
</td>
</tr>
</table>
</td>
<td width="114" align="right"><img src="/sites/default/files/img/box2.jpg" alt="" /></td>
</tr>
<tr>
<td colspan="3" height="132"><img src="/sites/default/files/img/box3.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120"><img src="/sites/default/files/img/report_mail_footer.jpg" alt="" /></td>
</tr>
</table>
I have a invoice design which I have replicated in html. Here is the fiddle.
The snippets of html table which I have used in the fiddle is:
<table style="width:100%;display: flex;
justify-content: center;">
<tbody style="font-size:20px;padding-left: 15%;">
<tr>
<td style="padding-bottom: 3%;text-align:right;">how many</td>
<td style="padding-bottom: 3%;padding-left: 10%;">2</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">when:</td>
<td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
width: 300px;" >March 28/18 # 7:00pm to March 30/18 # 7:00pm</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">who:</td>
<td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
</tr>
</tbody>
</table>
Problem Statement:
I am wondering if the table I have used above is the right way to use in html email or if there is any changes I need to make ? The reason why I am asking this because I have never coded html emails before.
Using Flex in html-emails is not fully supported by Gmail, yahoo, outlook.com Check these two helpful links below:
Old question on stackoverflow.
Support guid
If you follow normal table layout approach it would be supported by the majority of email clients, as I noticed that you also used <div> tag which will raise a flag as well.
This code might need more work and styling but just to show how this works better than using display: flex:
<html>
<body>
<p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="mobile" style="margin: 0 auto;" align="center">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style=" font-size:20px; padding: 0 0 0 15%;">
<tr>
<td style="padding-bottom: 3%;text-align:right;">type:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">what</td>
<td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">how many</td>
<td style="padding-bottom: 3%;padding-left: 10%;">2</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">when:</td>
<td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
width: 300px;">March 28/18 # 7:00pm to March 30/18 # 7:00pm</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">who:</td>
<td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
</td>
</tr>
<tr style="text-align: left;margin-left: auto;width: 50%;padding-right: 0%; margin-right: auto;color:#484848;font-size:20px;" class="steps">
<td>
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have an Iframe embedded on my Facebook page but when i was recently editing it I have killed all the links on it..
I was wanting to add button links directly under the banner and have them centred, can someone help me put together the code to do this, I am a newbie to coding so any help is appreciated.
to find my iframe you can follow this link
https://www.facebook.com/PhotographyBok/app/190322544333196/
but the code for my iframe is currently this.
<html>
<head>
<title>""</title>
</head>
<body bgcolor="#000000">
<br>
<table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
<tr>
<td height="70" colspan="3" align="center" valign="middle" bgcolor="#000000">
<img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg"</h1></td>
</tr>
<tr>
<td width="124" rowspan="3" valign="top" bgcolor="#000000">
<button>Timeline</button>
<button>Portfolio</button>
<button>Shop Now</button>
<td width="459" height="118" valign="top" bgcolor="#000000" style="text-align: center">
<font color="white">"I am a self proclaimed weekend photographic warrior.
I began learning photography when I was 15, working part time in a photographic lab, developing negatives and selling camera's, I started shooting myself with a 35mm Pentax SLR that I purchased second hand in Wellington New Zealand for $10, this served me well to learn the basics about aperture, focal length and shutter speed. Now I currently shoot with a Sony A380 DSLR.
I am constantly learning, adapting and improving, comments and followers are welcome and thanked.
My favourite photographer is Ansel Adams, I take the following quote into life and into photography."</font>
</td>
<td width="153" rowspan="3" valign="top" bgcolor="#000000">
</td>
</tr>
<tr>
<td height="433" valign="top" bgcolor="#000000"> <font color="white">"When words become unclear, I shall focus with photographs, when images become inadequate, I shall be content with silence. - Ansel Adams"</font></td>
</tr>
<tr>
<td height="44" valign="top" bgcolor="#FFFFC2">© Marcus Bok</td>
</tr>
</table>
</body>
</html>
Try this: http://jsfiddle.net/jo3atpz9/
<body bgcolor="#000000">
<br>
<table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
<tr>
<td height="70" colspan="3" align="center" valign="middle" bgcolor="#FFFFC2">
<img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg" </h1></td>
</tr>
<tr>
<td colspan="3">
<div style="text-align: center; width: 100%">
<button onClick="window.location.href='http://www.google.com'">Google</button>
<button onClick="window.location.href='http://www.google.com'">Google</button>
<button onClick="window.location.href='http://www.google.com'">Google</button>
</div>
</td>
</tr>
<tr>
<td width="124 " rowspan="3 " valign="top " bgcolor="#FFFFC2 ">
<td width="459 " height="118 " valign="top " bgcolor="#FFFFC2 " style="text-align: center ">
"insert new BIO here "
</td>
<td width="153 " rowspan="3 " valign="top " bgcolor="#FFFFC2 ">
</td>
</tr>
<tr>
<td height="433 " valign="top " bgcolor="#FFFFC2 "> " "When words become unclear, I shall focus with photographs, when images become inadequate, I shall be content with silence. - Ansel Adams"</td>
</tr>
<tr>
<td height="44" valign="top" bgcolor="#FFFFC2">© Marcus Bok</td>
</tr>
</table>
</body>
After a lot of time I put into researching. I still can't find an answer.
I have a HTML that is showing the wrong width in my tables. Here is a link to the html email: https://tagwebstore.com/email/tag-email-10percentmore.html and here is a screenshot of how it looks in Outlook 2007:
The main problem is the bottom area. The link of the html email displays it correctly. I have no idea what else to do from here. Here is my code for the bottom part I am having trouble with:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" colspan="3" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
<tr>
<td width="28"></td>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.</td>
</tr>
<tr align="right">
<td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table></td>
<td width="28"></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
</table>
<!--Testimonial End-->
<!--Footer-->
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="295" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">info#tagwebstore.com | 866.232.6477</td>
<td width="178" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">Follow us on Twitter & YouTube</td>
<td valign="middle" width="102"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" /><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
<!--Footer End-->
The width of the containing table is suppose to be 625px. Any help is appreciated.
oh the joy of html emails
There are many rules you have to obey when dealing with HTML-based email, especially when you have exacting clients and pixel-perfect designs, and I am quite glad that I haven't had to work on such a project for at least two years now... The main reason for my utter dislike of the practice is primarily down to two email-clients. The first and all time worst being Lotus Notes 6.5.4 (to be fair it's over 10 years old now.. but still!), and the all time second worst(s), they're not even the best at being bad, Outlook 2007 and 2010!
Whoever thought it would be a good idea to use the Microsoft Word WYSIWYG HTML Engine to render HTML Emails in Outlook 2007 and 2010, must have been mad, lazy, lost or ever-so-slightly confused (delete as appropriate). It causes no end of rendering problems for developers, usually with random and inexplicable sizing calculations or padding problems.
Taken from my blog http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html
Simply put, I do not envy you :)
I found the best way to help me out with my email troubles was to follow the following rules:
Never use colspans or rowspans.
Always set correct dimensions for your tables and cells.
Use spacer gifs rather than &nbps;.
Always specify correct image sizes and never scale images up or down.
Always add style="display:block;" to images.
Avoid using divs.
If you wish to colour links, put the styling on a span as a child inside the a tag.
Don't use italics.
Don't use BRs for layout, always use tables.
Use BRs in Text, not Ps (to avoid stange margin problems and paragraphing being completely ignored).
Because the sheer number of emails I used to get through ended up being ridiculous, I developed a script to help me with the work of checking dimensions and other possible pitfalls. If you're interested in using it you can find it here:
http://pastie.org/6250834
The script can be added as a usual script tag or enabled using GreaseMonkey or something similar (it was designed to work with Firefox but I see no reason why it shouldn't work elsewhere). Due to the way I used to build my emails, it will only enable itself if either the following conditions are met:
There is an outer wrapping table that has width="100%" set, used to centre the actual email content.
or... there is an outer element (a table or div) that has the id="base".
I've passed your HTML through it and the image below is the resulting output, it makes more sense when you have the actual page because you can hover over each bordered item and it will give you a rough idea of what the problem is (either that or you can just inspect the element directly with Firebug or similar).
So from inspecting the above it seems you have a few problems that need to be fixed, I'd say the most important ones are to get rid of rowspans and colspans (these always cause problems in Outlook) and to make sure all your dimensions tally correctly. Once you've fixed these issues you might see a considerable improvement, but then again you might not, there are no certainties in the hazardous life of HTML email building...
Hope it helps.
Try this for your top table:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
</td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28">
</td>
<td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
</td>
</tr>
<tr align="right">
<td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table>
</td>
<td width="28">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
</table>
and this for your bottom:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
info#tagwebstore.com | 866.232.6477
</td>
<td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
Follow us on Twitter & YouTube
</td>
<td valign="middle" width="49">
<img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" />
</td>
<td valign="middle" width="53">
<img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
Overall it was coded really well, just changed a few small things, not saying each was a must have, but IF it works you can reverse engineer the changes to find out what busted it. I haven't tested it, so hopefully this works...
how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>