<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宽是定死的
谢谢 上面要怎么改
<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宽是定死的
谢谢 上面要怎么改
<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> <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>
<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>
<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>