table表格布局之表格嵌套原理和实例

网页上有时候布局很复杂,且需要不同浏览器之间效果一致,这个时候表格布局就显示出其独特优势。

那么什么时候需要使用表格嵌套,以及什么时候需要独立成表,下面是一些要点。很重要的一点就是,如果多行的列数不一致,就应该独立成表

1、文字、图片、按钮都是放在表格里,不能放在行里。

2、不同行的格数可能不同。

3、不同行要放在同一表格,格数必须相同。

4、不同行格数不同,并且相差很大,则不应该放在同一表格。

5、所以页面会存在多张表格:  按内容复杂程度划分表格;页面宽度不一致,分表格。

表格的嵌套多使用在页面分为左右或者左中右三块,且每一块的行数差异很大。也就是说,多列的行数不一致,就应该表格嵌套。如豆瓣的首页就是典型。

实例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<body>
<!----------------------------------------------------第四个表(焦点新闻)------------------------------------------------------------------->
<table width="100%" align=center>
    <tr>
        <td></td><!-------D1左边空白------------------------------------------------------------->
        <td width=550px><!-------D2焦点新闻------------------------------------------------------>
                <table width="100%" height=50px align=center><!-------------t1表格嵌套开始-------------->
                    <tr>
                        <td width=300px><img src="http://www.sicnu.edu.cn/static/default/img/jdxw.png"><font size="5"> 焦点新闻</font><font color=grey size="3"> Focus</font></td>
                        <td width=150px></td>
                        <td width=100px><a href="http://news.sicnu.edu.cn/" style ="text-decoration:none"><font color=grey face=微软雅黑 size=1>+进入新闻网</a></td>
                    </tr>
                </table>
                <br>
                <table width="100%" height=400px align=center><!-------------t2-------------->
                    <tr>                   
                        <td width=270px><img width=270px src="http://202.115.196.10/uploads/article/16028997678656.jpg"></td>
                        <td width=10px></td>
                        <td width=270px><img width=270px src="http://202.115.196.10/uploads/article/16028997502152.jpg"></td>
                    </tr>
                    <tr height=10px></tr>
                    <tr>
                        <td width=270px><img width=270px src="http://202.115.196.10/uploads/article/15997903805031.jpg"></td>
                        <td width=10px></td>
                        <td width=270px><img width=270px src="http://202.115.196.10/uploads/article/15987001226951.JPG"></td>
                    </tr>
                </table><!-------表格嵌套结束------------------>
        </td>
        <td width=100px></td><!-------D3中间空白间隔------------------------------------>
        <td width=550px><!-------D4校园新闻----------------------------------------->
            <table width="100%" height=50px align=center><!---------------t1------------------------>
                <tr>
                    <td width=300px><img src="http://202.115.196.10/uploads/columnicon/153137941755.png"><font size="5"> 校园新闻</font><font color=grey size="3"> CAMPUS NEWS</font></td>
                    <td width=150px></td>                  
                    <td width=100px><a href="http://news.sicnu.edu.cn/article/34#1" style ="text-decoration:none"><font color=grey face=微软雅黑 size=1>+更多</a></td>
                </tr>
            </table>
            <table height=400px><!---------------t2------------------------>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26539"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>习近平:在纪念中国人民志愿军抗美援朝出国作战70...</a>
                    <td><font color=grey>10-23</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26549"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>学校召开基本建设工作推进会</a>
                    <td><font color=grey>10-25</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26547"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>学校中层干部培训班开班 校党委书记李向成作首场...</a>
                    <td><font color=grey>10-24</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26546"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>湖北师范大学来校交流座谈</a>
                    <td><font color=grey>10-23</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26545"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>我校图书馆荣获2019年度全国“全民阅读先进单位”...</a>
                    <td><font color=grey>10-23</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26542"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>全省教育系统“七五”普法调研座谈会在我校召开</a>
                    <td><font color=grey>10-23</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26537"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>我校举行纪念世界平民教育家晏阳初诞辰130周年座谈...</a>
                    <td><font color=grey>10-22</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26536"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>我校2个项目入选全省高校思想政治工作精品项目</a>
                    <td><font color=grey>10-22</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26533"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>校长到机关三总支宣讲学校第六次党代会精神</a>
                    <td><font color=grey>10-21</td>
                </tr>
                <tr>
                    <td>▲</td>
                    <td width=400px><a href="http://news.sicnu.edu.cn/details/34_26532"style ="text-decoration:none"><font color=black face=微软雅黑 size=3>我校与成都市武侯区人民政府签署教育战略合作协议</a>
                    <td><font color=grey>10-21</td>
                </tr>
            </table>
        </td>
        <td></td><!-------D5------>
    </tr>
</table>   
</body>
</html>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: