使用表格布局
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使⽤表格布局
如何使⽤表格进⾏布局？
可以使⽤⼀个三⾏两列的表格对页⾯进⾏布局（为了⽅便显⽰，各区域设置了不同的背景颜⾊），
显⽰的效果如下：
实现该效果的代码：
<body>
<table width="800px" border="0" >
<tr>
<td colspan="2" height="40px" bgcolor="#dddddd"><h3>区域1</h3></td>
</tr>
<tr>
<td height="160px" width="300px" bgcolor="#bbbbbb"><h3>区域2</h3></td>
<td rowspan="2" bgcolor="aqua"><h3>区域3</h3></td>
</tr>
<tr>
<td height="240px" bgcolor="blue"><h3>区域4</h3></td></tr>
</table>
</body>
嵌套布局
在使⽤表格对⼤的格局进⾏了布局之后，可以看到，将区域1和区域3放⼊图⽚或⽂字即可，⽽区域2（3⾏3列）区域4（6⾏1列）则还需要进⾏微布局，也就是嵌套的表格，以达到整齐的显⽰效果，显⽰的效果：
实现该效果的代码：
1 <table width="800px" border="0" >
2 <tr>
3 <td colspan="2" height="40px" bgcolor="#dddddd"><h3>区域1</h3></td>
4 </tr>
5 <tr>
6 <td height="160px" width="300px" bgcolor="#bbbbbb">
7 <table width="300" border="0">
8 <tr height="80px"><td></td>
9 <td>区域2-1</td>
10 <td>区域2-2</td>
11 <td>区域2-3</td>
12
13 </tr>
14
15 <tr height="40px" bgcolor="#dddddd"><td></td>
16 <td>区域2-4</td>
17 <td>区域2-5</td>
18 <td>区域2-6</td>
19
20 </tr>
21 <tr height="40px" ><td></td>
22 <td>区域2-7</td>
23 <td>区域2-8</td>
24 <td>区域2-9</td>
25
26 </tr>
27 </table>
28
29
30
31 </td>
32 <td rowspan="2" bgcolor="aqua"><h3>区域3</h3></td>
33 </tr>
34
35
36 <tr>
37 <td height="240px" >
38
39
40 <table width="300px" border="0" bgcolor="#dddddd">
41
42 <tr height="40px"><td>区域4-1</td></tr>
43 <tr height="40px" bgcolor="#bbbbbb"><td>区域4-2</td></tr>
44 <tr height="40px"><td>区域4-3</td></tr>
45 <tr height="40px" bgcolor="#bbbbbb"><td>区域4-4</td></tr>
46 <tr height="40px"><td>区域4-5</td></tr>
47 <tr height="40px" bgcolor="#bbbbbb"><td>区域4-6</td></tr>
48
49
50 </table>
51
52 </td></tr>
53 </table>。