1

所以我目前的布局是：

<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/
已装饰%20images/Siberians_zpsbe70e931.png

老实说，我可能做错了，但到目前为止它还在工作。我目前的问题是我的“记录”部分太薄了。而且我无法为我的生活弄清楚如何使它更宽。我已经尝试编辑所有说“宽度”的东西，并制作我自己width=x的命令，但似乎没有任何效果。不知道我在这里做错了什么。

4

2 回答 2

0

试试这个并更改所需的记录字段大小。

<td width="20%">

演示

于 2013-09-09T06:36:40.507 回答
0

这是你的JsBin代码

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

  • 你的布局真的很复杂。
  • 你不应该使用太多的表格，表格只是用来呈现一些表格数据。
  • 尝试仅使用<div>标签。
  • 请使用一些jsbin或jsfiddle类似的在线工具向我们展示您的问题。
  • 表格的嵌套确实会在您的 html 代码中创建复杂性，从而降低其可读性。

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

  1. http://www.learnlayout.com
  2. http://www.tizag.com/htmlT/htmldiv.php
  3. http://www.youtube.com/watch?v=68kiDajh1lg
  4. 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>
于 2013-09-09T07:48:08.770 回答