Web page breaks when inserting a table row

Question

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">&nbsp;</td>
<td valign="top" width="151"><a href="http://www.mywebsite.com"><img src="premises.png" alt="" border="0" height="107" width="150" /></a></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 - <a href="http://www.mywebsite.com">www.mywebsite.com</a><br />

<a href="mailto:info@mywebsite.com">info@mywebsite.com</a>
</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: enter image description here

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. enter image description here

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: (

enter image description here

I have no answer, but what's up with the single-row, single-column nested tables? That seems very superfluous. — hmakholm left over Monica, Aug 20 '11 at 20:53
Note sure if this is the error, but you have a random closing tag in your first code snippet (around line 10) — Snowy Coder Girl, Aug 20 '11 at 20:56
Juhana is right, I agree. You seem to be using tables for format the display of your page. While a ton of people do this, it is not the "right" way. You should use CSS — Snowy Coder Girl, Aug 20 '11 at 21:02
is more like an self-closing tags in XHTML Documents, but not valid anyway ;) (see http://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-tags-in-xhtml-as-implemented-by-the-major-br) — Zuul, Aug 20 '11 at 21:07
@Juhana - If I had a choice I won't use table, but it is required for this particular page. Thanks anyway. — Helen Neely, Aug 20 '11 at 21:08

Snowy Coder Girl · Accepted Answer · 2011-08-20T22:44:49.320

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"><a href="http://www.mywebsite.com"><img src="premises.png" border="0" height="107" width="150" /></a></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>&nbsp;</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 - <a href="http://www.mywebsite.com">www.mywebsite.com</a><br /> <a href="mailto:info@mywebsite.com">info@mywebsite.com</a> </span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

By the way, the least common multiple of 3, 2, and 7 is 42. So you could have 42 columns and set your colspan properly. But I suggest you reconsider your table setup. — Snowy Coder Girl, Aug 20 '11 at 21:27
The problem is that I've been staring at the code for too long that my brain is basically gone into hibernation :( . I can't figure out where that 7 column you're referring is. — Helen Neely, Aug 20 '11 at 21:30
See my edit. I tried to edit your code's colspan values to add be correct. Each row has 6 columns now. — Snowy Coder Girl, Aug 20 '11 at 21:51
Thanks for your help so far. I just ran your code and you can see that the top column moves all the way to the left. That's what I've been getting. — Helen Neely, Aug 20 '11 at 22:07
I updated the code. Try again. I had to separate out into 2 tables. Not sure if you are "allowed" to do that. You said you needed tables, so not sure what else your requirements might be. — Snowy Coder Girl, Aug 20 '11 at 22:29
BTW, that code worked for me on my site (obviously I didn't have the image though). But all worked well. Tested on IE, Chrome, and Safari. — Snowy Coder Girl, Aug 20 '11 at 22:30
Added a slight edit because there was a gap between the header text area and image. — Snowy Coder Girl, Aug 20 '11 at 22:46
Thanks a million for the awesome help. It's now working - I can't thank you and the rest of the folks here enough. :-) — Helen Neely, Aug 20 '11 at 22:47

score 0 · Answer 2 · edited Aug 29 '18 at 17:13

0

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).

edited Aug 29 '18 at 17:13

halfer

19,824
17
99
186

answered Aug 20 '11 at 21:01

Zuul

16,217
6
61
88

Sorry, could you show me when I'm missing the necessary amount of TD's? I need to see of that might help as well. – Helen Neely Aug 20 '11 at 21:13
See my answer, I outline your table structure. – Snowy Coder Girl Aug 20 '11 at 21:21

score 0 · Answer 3 · answered Aug 20 '11 at 21:27

0

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.

answered Aug 20 '11 at 21:27

Neil

54,642
8
60
72

Web page breaks when inserting a table row

3 Answers3