Posted on 2011-04-16 14:28
IceWee 阅读(425)
评论(0) 编辑 收藏
最近经常要调整系统中的一些页面,虽然不是专业的美工,但也要略知一二才能应付得了。
例一:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table.html</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<style type="text/css">
<!--
body {
margin: 0px;
}
//
-->
</style>
</head>
<body>
<table height="100%" width="100%" cellSpacing="0" cellPadding="0"
border="2" bordercolor="black">
<tr>
<td height="100%" width="200px" bgcolor="red">
</td>
<td height="100%" width="10px" bgcolor="green">
</td>
<td height="100%" width="100%" bgcolor="blue">
</td>
</tr>
</table>
</body>
</html>
上面的效果为整个页面呈现蓝色,看起来没什么奇怪的,因为第三个td设置了宽度为100%,所以前两个td的宽度自然被挤没了。只要把红色的100%去掉留空,或者干脆不写宽度,那么正是想看到的结果,第三个td占用剩余的文档宽度。
例二:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table.html</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<style type="text/css">
<!--
body {
margin: 0px;
}
//
-->
</style>
</head>
<body>
<table height="100%" width="100%" cellSpacing="0" cellPadding="0"
border="2" bordercolor="black">
<tr>
<td height="200px" width="100%" bgcolor="red">
</td>
</tr>
<tr>
<td height="100px" width="100%" bgcolor="green">
</td>
</tr>
<tr>
<td height="100%" width="100%" bgcolor="blue">
</td>
</tr>
</table>
</body>
</html>
这次table改为三行,宽度都为100%,三个tr分整个文档的高度,第三个td的高度100%,根据例一的经验,第三个tr应该会占据其余两个tr的
高度,也就是和例一一样的效果,满屏蓝色。但是结果却不是想象中的那样。接着把100%换为空串或去掉高度的设置,效果都一样。这不能用什么来解释,只能
记住,这就是td设置高度和宽度的差别。