Posted on 2011-04-16 14:28
IceWee 閱讀(453)
評論(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設置高度和寬度的差別。