Question

所以我目前的布局是：

<div style="width:900px;height:500px;border:6px double #00c7ff;"><table cellspacing="1" cellpadding="0" border="0"
 bgcolor="white" id="shell" height="500" width="900">
   <tr height="50">
      <td colspan="2" bgcolor="#cab0cb">
         <table title="Banner" id="banner" border="0">
            <tr><td>Place a banner here</td></tr>
         </table>
      </td>
   </tr>
   <tr height="50">
      <td bgcolor="#cab0cb">
         <table id="navigation" title="Navigation" border="0">
            <tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>

         </table>
      </td><td bgcolor="#cab0cb">
         <table title="Content" id="content" border="0">
            <tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
         </table>
      </td>
   </tr>
</table>
</div>

我试图让它有点像这样： http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Dexterity_zps04ada334.png
http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Siberians_zpsbe70e931.png

说实话，我说这一切都是错的，但到目前为止它仍然有效.. 我现在的问题是我的“记录”部分太薄了。我无法想象为我的生活如何使它更广泛。我已经尝试编辑了所有“宽度”，并制作了我自己的width=x命令，但似乎没有任何工作。不知道我在这里做错了什么。

Answer 1

尝试此操作并更改所需的记录字段大小。

<td width="20%">

DEMO

Answer 2

这是您的JsBin代码

好吧，我不应该就你的布局给你一些建议但我必须说

您的布局非常复杂。
您不应该使用太多的表，表只用于呈现一些表格数据。
尝试仅使用 <div> 标记。
请使用一些 jsbin 或 jsfiddle 等在线工具向我们展示您的问题。
表的嵌套确实会在html代码中产生复杂性，从而降低其可读性。

如果您在设计网页布局时遇到问题，我会向您推荐这些链接。请看一下。

http://www.learnlayout.com
http://www.tizag.com/htmlT/htmldiv.php
http://www.youtube.com/watch?v=68kiDajh1lg
http://gostats.com/resources/css-div-tutorial.html

您的代码

<div style="width:90%; margin:auto;height:500px;border:6px double #00c7ff; vertical-align:top;"><table cellspacing="10" cellpadding="10" border="0"
  bgcolor="#cab0cb" id="shell" height="500" >
   <tr height="50">
      <td colspan="2" bgcolor="#cab0cb">
         <table title="Banner" id="banner" border="0">
            <tr><td>Place a banner here</td></tr>
         </table>
      </td>
   </tr>
   <tr height="50">
     <td bgcolor="#cab0cb" style="width:20%;">
         <table id="navigation" title="Navigation" border="0">
           <tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>
          </table>
      </td><td bgcolor="#cab0cb">
         <table title="Content" id="content" border="0">
            <tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
         </table>
      </td>
   </tr>
</table>
</div>

我如何进行此布局？

2 个答案:

您的代码