2.5.4 使用表格布局网页
表格常常用来给网页布局，采用表格将整个显示窗口划分为几部分，在划分时要指定表行、单元格的宽度和高度(单位可用像素，也可使用百分比)，当网页组成很复杂时，可以采用表格嵌套来布局网页。
例如，要设计一个三行(中间一行分两列)的网页布局。
先设计一个三行一列的表格，设置表格的边框线为0(border="0")、间距为5(cellspacing="5")、填充为0(cellpadding="0")，根据当前显示器分辨率的普遍情况，将表格宽度设计为固定的1000像素；
设置第一行(网站名称区)高度为固定值为150像素；
在第二行单元格内单击，单击属性面板中的“拆分”按钮，将拆为两列，然后在左边单元格(列表区)内单击，设置其宽度值为300像素、高度值为420像素；
在第三行(页脚区)内单击，设置其高度值为60像素。
结果如图2-38所示，这是一种典型的网页布局。
图2-38 使用表格布局网页
这个网页布局的表格和相关CSS代码如下(完整代码在压缩包template1.html文件里)。
<head>
<style type="text/css">
<!--
.font1 { text-align: center; font-weight: bold; font-size: 36px; }
-->
</style>
</head>
<body>
<table width="1000" border="0" cellspacing="5" cellpadding=”0”>
<tr>
<td height="150" colspan="2" bgcolor="#DDDDDD" class="font1">网站名
称区</td> /∗ 在HTML中，用6位十六进制数表示颜色 ∗/
</tr>
<tr>
<td width="300" height="420" bgcolor="#DDDDDD" class="font1">列表区
</td>
<td height="400" bgcolor="#EEEEEE" class="font1">内容区</td>
</tr>
<tr>
<td height="60" colspan="2" bgcolor="#DDDDDD" class="font1">页脚区
</td>
</tr>
</table>
</body>
设计好网页布局以后，在各区域内填充文本、图片、媒体、表格、程序脚本等内容，才能形成一个完整的网页。
注意：(1)在表格嵌套的时候，通常不设外层表格的高度，它的高度由最里层的单元格高度和来决定。
(2)要注意表格的宽度设置，要认真思考再设定表格的宽度：单位是百分比还是像素？是设定外层单元格宽度还是设定里层表格的宽度？
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
