Posted on 2011-04-16 14:28
IceWee 阅读(427)
评论(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设置高度和宽度的差别。