使用表格布局

最新推荐文章于 2021-05-30 10:47:59 发布

weixin_30569033

最新推荐文章于 2021-05-30 10:47:59 发布

阅读量247

点赞数

原文链接：http://www.cnblogs.com/jiguiyan/p/11468775.html

版权

如何使用表格进行布局？

可以使用一个三行两列的表格对页面进行布局（为了方便显示，各区域设置了不同的背景颜色），

显示的效果如下：

实现该效果的代码：

<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>

转载于:https://www.cnblogs.com/jiguiyan/p/11468775.html

weixin_30569033

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用表格布局

如何使用表格进行布局？可以使用一个三行两列的表格对页面进行布局（为了方便显示，各区域设置了不同的背景颜色），显示的效果如下：实现该效果的代码：<body> <table width="800px" border="0" > <tr> ...
复制链接

扫一扫