Question

我有一个我试图开发的网页，但我无法弄清楚布局的问题是什么。当我包含下面的代码时，页面会变形并超出宽度。

这个特殊代码在浏览器上查看时效果很好，但是当我想添加另一行 BETWEEN 人物图片和 RED页脚时，一切都会中断

<!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>

这是我想在People图像和红色页脚之间插入的代码。

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

这是他们看起来像的图像： enter image description here

最后一段代码产生了这个图像 - 这就是我要在人物图片和红色页脚之间的页面中插入的内容。 enter image description here

更新：这是页面的样子 - 顶部列向左推。它应该伸展而不是推向一边:(

enter image description here

Answer 1

试试这个网站。它会告诉你代码有什么问题：

HTML Validator

验证者发现的一个问题是align不能是“中心”

另外，如果这不起作用，你是否意识到代码会尝试将2个表填入“主表”的前2列？

例如，这是您基本拥有的内容：

<tr>
    <td>
    <td>
    <td>
<tr>
    <td> //3 columns wide
<tr>
    <td>
    <td>
<tr>
    <td> //7 columns wide

所以，你有点说，3列然后是3列，然后是2列，然后是7列。

我试着快速编辑。也许以下工作？

<!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>

Answer 2

你在那里使用一些“旧式编码”;）

你要插入的TR 里面没有必要数量的TD ，从而导致布局中断......或者你忘记了某个地方的“colspan”！

我相信这足以引起你所说的话。

（我没有测试过这个！这只是你的代码的分析）。

Answer 3

这是colspan的限制。即使每行的所有列跨度都相同，但至少有一行必须由单个单元格组成，否则您无法正确指定宽度。

插入表格行时网页中断

3 个答案: