I'm building an html only eBlast. I have on table that lives inside of a which holds body copy. It is pushing itself outside of the containing table. How can I make this sit inside the container where it is supposed to be?
Here's what it's doing: http://zachkeller.net/annie_moses/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>The Song of Annie Moses</title>
<style type="text/css">
#backgroundTable {
table-layout:fixed;
width: 650px;
background-image: url(images/background.jpg);
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="750px" width="650px" id="backgroundTable">
<tr>
<td align="center" valign="top" height="125px" width="650">
<img src="images/headline.png">
</td>
</tr>
<tr>
<td width="220px">
<table border="0" cellpadding="0" cellspacing="0" width="220px" height="375">
<tr>
<td>
<img src="images/cover.png">
</td>
</tr>
</table>
</td>
<td width="430px">
<table border="0" cellpadding="0" cellspacing="0" width="430px" height="375">
<tr>
<td>
<p>The Song of Annie Moses tells of a miraculous musical journey spanning four generations that brought a family to The Julliard School and world stages, including Carnegie Hall. The story is one of God plowing a path, and shaping their music and message for his purpose. Discover that God has placed within all of us a calling to express what we know with beauty and wonder.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<img src="images/band.jpg">
</td>
</tr>
<tr>
<td align="center">
<p>The Annie Moses Band is a Christian family of Juilliard trained musicians dedicated to virtuosity in the arts. Add the veteran, award-winning, song writing talents of their parents, Bill and Robin Wolaver, and you have a dynamic group with roots in classical, pop, and jazz.</p>
</td>
</tr>
</table>
</body>
</html>
Add colspan="2" to all your <td> elements, which take the full width..
Moreover your HTML-Code is not good at all. Two important things: for html width-attribute you don't need px after the number. The second thing is, that you are creating a full <table> for only one <p>-Element.. I don't know why you are doing this..
This is the full code, which should work.. I fixed some other things, although it's still not perfect:
<html><head>
<title>The Song of Annie Moses</title>
<style type="text/css">
#backgroundTable {
table-layout:fixed;
width: 650px;
background-image: url(images/background.jpg);
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="750px" width="650px" id="backgroundTable">
<tbody><tr><td width="250"></td><td width="400"></td><tr>
<td align="center" valign="top" height="125" width="650" colspan="2">
<img src="images/headline.png">
</td>
</tr>
<tr>
<td>
<img src="images/cover.png">
</td>
<td>
<p>The Song of Annie Moses tells of a miraculous musical journey spanning four generations that brought a family to The Julliard School and world stages, including Carnegie Hall. The story is one of God plowing a path, and shaping their music and message for his purpose. Discover that God has placed within all of us a calling to express what we know with beauty and wonder.</p>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="images/band.jpg">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<p>The Annie Moses Band is a Christian family of Juilliard trained musicians dedicated to virtuosity in the arts. Add the veteran, award-winning, song writing talents of their parents, Bill and Robin Wolaver, and you have a dynamic group with roots in classical, pop, and jazz.</p>
</td>
</tr>
</tbody></table>
</body></html>
Tables need to have equal number of columns per row. Row 2 has two columns, while all other rows have one. Remove the inner tables, set border=1 and you can easily see where your table is broken. As kostyan says above, you need to add colspans.
<table border="1" cellpadding="0" cellspacing="0" height="750px" width="650px" id="backgroundTable">
<tr>
<td align="center" valign="top" height="125px" width="650">
A
</td>
</tr>
<tr>
<td width="220px">
B
</td>
<td width="430px">
C
</td>
</tr>
<tr>
<td align="center">
D
</td>
</tr>
<tr>
<td align="center">
E
</td>
</tr>
</table>
need to set colspan correctly, your second row has 2 cells but rest only one
<td colspan="2"...
Related
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>
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 .
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...
I am placing a heading/title on a HTML page using following code:
<table width="100%" height="55px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px">
</td>
</tr>
<tr>
<td style="width:105px;"></td>
<td align="left" style="padding-right:10px;padding-left:10px">
<div style="font-family:quicksand;font-size: 28px; color:##bdbdc0;z- index:1000000;position:relative;">
De Graef <font size="2">Landelijk & Sfeervol Wonen</font>
</div>
</td>
</tr>
</table>
Other content is in other tables.
When i zoom in or zoom out, or simply change resolution, this text is not moving it's position in sync with the other page elements.
Any ideas?
Change your header row to this :
<tr>
<td align="center" style="font-family:quicksand;font-size: 28px; color:##bdbdc0;margin-left:-50px;background-color:##4D4946;">
<table width="956" border="0" height="100%" cellspacing="0" cellpadding="0" style="background-color:##4D4946;">
<tbody>
<tr>
<td style="background-color:##4D4946;">
<br>
<br>
<img style="background-color:##4D4946;" src="images/logonew.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm helping you here but should seriously consider rewriting all of it in a clean and modern way, most of your code is deprecated :
Use appropriate HTML markup for segmenting your document
Use <table> only when then you need an actual table
Use separate CSS files for keeping your markup clean
Read the W3C recommendations about all of this
I have a webpage I was trying to develop, but I can't figure out what the problem is with the layout. The page goes all out of shape and out of width when I include the code below.
This particular code comes out well when viewed on a browser, but when I want to add another row BETWEEN the people picture and the RED Footer, everything breaks
<!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>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; width: 600px;" align="center">
<tr>
<td bgcolor ="#e4322d" valign="top" width="437" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td align="left" valign="top" width="14"> </td>
<td valign="top" width="151"><img src="premises.png" alt="" border="0" height="107" width="150" /></td>
</tr>
<tr>
<td align="center" colspan="3" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;">
<img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg">
<p />
</td>
</tr>
<!--I WANT THE COLUMN HERE-->
<tr>
<td bgcolor ="#e4322d" colspan="7" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;">
Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br />
info#mywebsite.com
</span></p>
</td>
</tr>
</table>
</body>
</html>
Here's the code I want to insert in between the People image and the red footer.
<tr>
<td>
<table>
<tr>
<td>
<img src="premises.png" align="center" width="120px" height="128px"/>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tr>
<td> We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.
</td>
</tr>
</table>
</td>
</tr>
Here's the images of what they look like:
The last piece of code produces this image - which is what I want to insert in the page between the people picture and the red footer.
Update: Here's what the page looks like - the top column pushes to the left. It should stretch across and not push to one side: (
Try this site. It will tell you what's wrong with your code:
HTML Validator
One problem caught by the validator is that align cannot be "center"
Also, if that didn't work, do you realize that the code will try to stuff the 2 tables into the first 2 columns of your "master table"?
For example, here is what you basically have:
<tr>
<td>
<td>
<td>
<tr>
<td> //3 columns wide
<tr>
<td>
<td>
<tr>
<td> //7 columns wide
So, you are kind of saying, 3 columns then 3 columns then 2 columns then 7 columns.
I tried to do a quick edit. Maybe the following works?
<!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>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; border-bottom:none; width: 600px;" align="center">
<tbody>
<tr>
<td bgcolor="#e4322d" valign="top" width="937" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td valign="top" width="151"><img src="premises.png" border="0" height="107" width="150" /></td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #223e86;border-top:none; width: 600px;" align="center">
<tbody>
<tr>
<td colspan="6" align="center" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;"><img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg" />
<p> </p>
</td>
</tr>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td><img src="premises.png" align="center" width="120px" height="128px" /></td>
</tr>
</tbody>
</table>
</td>
<td colspan="3">
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tbody>
<tr>
<td>We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#e4322d" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"> Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br /> info#mywebsite.com </span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This is a limitation of colspan. Even if all the column spans add up to the same for each row, at least one of your rows must consist of individual cells, otherwise you can't specify the widths correctly.
You are using some "old style coding" there ;)
The TR that you are inserting does not have the necessary amount of TD's inside it, thus causing the layout to break... or you forgot a "colspan" somewhere!
I believe that this is enough to cause what you are saying.
(I have not tested this! It's just an analysis by your code).