<table width="100%" border="1">
<tr>
<td width="200" bgcolor="yellow" id="table_left" height="500">左边</td>
<td width="500" bgcolor="honeydew" id="table_center">
<table id="center_Top" width="100%">
<tr>
<td bgcolor="red">最上</td>
</tr>
</table>
<table id="center_Main" width="100%">
<tr>
<td bgcolor="blue">中间</td>
</tr>
</table>
<table id="center_foot" width="100%">
<tr>
<td bgcolor="black">最下</td>
</tr>
</table>
</td>
<td bgcolor="lovender" id="table_right">右边</td>
</tr>
</table>这是我写的一个网页框架
首先说明一下:
table_left宽为200但是他的高度是不确定的!
table_center宽为500,但他的高度是根据table_left多大为多大
table_right宽为屏幕乘下的center_top为table_center的最上一个table他的高度是固定的在这里比如为20px
center_foot为table_center的最下一个table他的高度是固定的在这里比如为20pxcenter_Main的他高度是根据这个td的高度去掉center_top,center_foot的高度乘下的
也就是相当于center_foot.height=table_left.height-center_top.hight-center_foot.height问题一:
当我给center_Main 加多 height="100%"的时候那center_foot就不见了,因为他给center_Main占用了二:最上面的table width="100%"在这里并不是很好,如果浏览器缩小的话我里面的三个td的宽度就会改变,
   这是我不想要,我想要的是前面两个td宽是定死的
   
谢谢 上面要怎么改

解决方案 »

  1.   

    <table width="100%" border="1">
    <tr>
    <td width="200" bgcolor="yellow" id="table_left" height="500">左边</td>
    <td width="500" bgcolor="honeydew" id="table_center">
    <table id="tb01" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td valign="top">
    <table id="center_Top" width="100%">
    <tr>
    <td bgcolor="red" height="20px">最上</td>
    </tr>
    </table>
    <table id="center_Main" width="100%" >
    <tr>
    <td bgcolor="blue" id="td_hh">中间</td>
    </tr>
    </table>
    <table id="center_foot" width="100%">
    <tr>
    <td bgcolor="black" height="20px">最下</td>
    </tr>
    </table>
    </td></tr>
    </table>
    </td>
    <td bgcolor="lovender" id="table_right">右边</td>
    </tr>
    </table>
    <script>
    document.getElementById('td_hh').height = document.getElementById('table_left').height - 40;
      

  2.   

    ...
    少了个
    </script>  <table width="100%" border="1">
    <tr>
    <td width="200" bgcolor="yellow" id="table_left" height="500">左边</td>
    <td width="500" bgcolor="honeydew" id="table_center">
    <table id="tb01" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td valign="top">
    <table id="center_Top" width="100%">
    <tr>
    <td bgcolor="red" height="20px">最上</td>
    </tr>
    </table>
    <table id="center_Main" width="100%" >
    <tr>
    <td bgcolor="blue" id="td_hh">中间</td>
    </tr>
    </table>
    <table id="center_foot" width="100%">
    <tr>
    <td bgcolor="black" height="20px">最下</td>
    </tr>
    </table>
    </td></tr>
    </table>
    </td>
    <td bgcolor="lovender" id="table_right">右边</td>
    </tr>
    </table>
    <script>
    document.getElementById('td_hh').height = document.getElementById('table_left').height - 40;
    </script>
      

  3.   

    财神爷 zyciis114 () 那么早就又来派100分的帖子啦,还未过年呢,呵呵。其实你不如直接说你的排版需求啊,要多少个区域,这些区域的定位与长宽有什么条件,我帮你用div+css排给你就是了。用<table />排得又累,代码又多。 如果你有时间的话,我建议你去学一下CSS。《CSS Mastery》,中文版为《精通CSS》,如果你有一定的CSS基础,看完这本书基本上你想要的排版都能做出来。
      

  4.   

    1、用span撑开
    <table width="100%" border="1" height="100%">
    <tr>
    <td width="200" bgcolor="yellow" id="table_left">
    <span style="width:200px">左边</span>
    </td>
    <td width="500" bgcolor="honeydew" id="table_center">
    <span style="width:500px;height:100%">
    <table id="center_Top" width="100%" height="100%">
    <tr>
    <td bgcolor="red" height="20">最上</td>
    </tr>
    <tr>
    <td bgcolor="blue" height="100%">中间</td>
    </tr>
    <tr>
    <td bgcolor="black" height="20">最下</td>
    </tr>
    </table>
    </span>
    </td>
    <td bgcolor="lovender" id="table_right" width="100%">右边</td>
    </tr>
    </table>
      

  5.   

    2、transitional.dtd<!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" lang="zh-CN"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    <style>
    #table1{
    width:100%;
    height:100%;
    }
    #table_left{
    width:200px;
    background:yellow;
    }#table_center{
    width:500px;
    background:honeydew;
    }#table_right{
    width:100%;
    background:lovender;
    }
    </style>
    </head><body>
    <table border="1" width="100%" height="100%">
    <tr>
    <td id="table_left">左边</td>
    <td id="table_center">
    <table id="center_Top" width="100%" height="100%">
    <tr>
    <td bgcolor="red" height="20">最上</td>
    </tr>
    <tr>
    <td bgcolor="blue" height="100%">中间</td>
    </tr>
    <tr>
    <td bgcolor="black" height="20">最下</td>
    </tr>
    </table>
    </td>
    <td>右边</td>
    </tr>
    </table>
    </body></html>
      

  6.   

    你可以用JS来决定他的宽度,高度。在BODY的onload方法里写JS脚本,自己想要多宽就多宽。很方便。