Posted on 2011-04-16 14:28
IceWee 閱讀(448)
評論(0) 編輯 收藏
最近經(jīng)常要調(diào)整系統(tǒng)中的一些頁面，雖然不是專業(yè)的美工，但也要略知一二才能應(yīng)付得了。
例一：
<!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>
上面的效果為整個(gè)頁面呈現(xiàn)藍(lán)色，看起來沒什么奇怪的，因?yàn)榈谌齻€(gè)td設(shè)置了寬度為100%，所以前兩個(gè)td的寬度自然被擠沒了。只要把紅色的100%去掉留空，或者干脆不寫寬度，那么正是想看到的結(jié)果，第三個(gè)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%，三個(gè)tr分整個(gè)文檔的高度，第三個(gè)td的高度100%，根據(jù)例一的經(jīng)驗(yàn)，第三個(gè)tr應(yīng)該會(huì)占據(jù)其余兩個(gè)tr的
高度，也就是和例一一樣的效果，滿屏藍(lán)色。但是結(jié)果卻不是想象中的那樣。接著把100%換為空串或去掉高度的設(shè)置，效果都一樣。這不能用什么來解釋，只能
記住，這就是td設(shè)置高度和寬度的差別。