1
<table cellpadding="0" cellspacing="0" border="1" width="100%">
2 <tr>
3 <td colspan="3"><b>基本信息</b></td>
4 </tr>
5 <tr>
6 <td width="30%">姓名</td>
7 <td width="30%">身份证号码</td>
8 <td width="40%">性别</td>
9 </tr>
10 <tr>
11 <td>冯超</td>
12 <td>4401021881001341</td>
13 <td>男</td>
14 </tr>
15 <tr>
16 <td>冯超</td>
17 <td>4401021881001341</td>
18 <td>男</td>
19 </tr>
20 <tr>
21 <td colspan="3"><b>联系方式</b></td>
22 </tr>
23 <tr>
24 <td>姓名</td>
25 <td colspan="2">地址</td>
26 </tr>
27 <tr>
28 <td>冯超</td>
29 <td colspan="2">广州市天河XXXXXX路XXX号</td>
30 </tr>
31 <tr>
32 <td>冯超</td>
33 <td colspan="2">广州市天河XXXXXX路XXX号</td>
34 </tr>
35 </table>
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
第二段：
1<table cellpadding="0" cellspacing="0" border="1" width="100%">
2 <tr>
3 <td>
4 <table cellpadding="0" cellspacing="0" width="100%">
5 <tr>
6 <td colspan="3"><b>基本信息</b></td>
7 </tr>
8 <tr>
9 <td width="30%">姓名</td>
10 <td width="30%">身份证号码</td>
11 <td width="40%">性别</td>
12 </tr>
13 <tr>
14 <td>冯超</td>
15 <td>4401021881001341</td>
16 <td>男</td>
17 </tr>
18 <tr>
19 <td>冯超</td>
20 <td>4401021881001341</td>
21 <td>男</td>
22 </tr>
23 </table>
24 </td>
25 </tr>
26 <tr>
27 <td>
28 <table cellpadding="0" cellspacing="0" width="100%">
29 <tr>
30 <td colspan="3"><b>联系方式</b></td>
31 </tr>
32 <tr>
33 <td width="30%">姓名</td>
34 <td colspan="2" width="70%">地址</td>
35 </tr>
36 <tr>
37 <td>冯超</td>
38 <td colspan="2">广州市天河XXXXXX路XXX号</td>
39 </tr>
40 <tr>
41 <td>冯超</td>
42 <td colspan="2">广州市天河XXXXXX路XXX号</td>
43 </tr>
44 </table>
45 </td>
46 </tr>
47 </table>
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
这两段代码实现效果是一样的，可是如果需求改变，比如：给联系方式加多两列，一列为“电话”放在“姓名”后面，一列为“邮编”，放在“地址”后面。那么这两段代码的改动就不一样了。
第一段代码改动为：
1<table cellpadding="0" cellspacing="0" border="1" width="100%" ID="Table4">
2 <tr>
3 <td colspan="4" ><b>基本信息</b></td>
4 </tr>
5 <tr>
6 <td width="30%">姓名</td>
7 <td width="30%">身份证号码</td>
8 <td width="40%" colspan="2" >性别</td>
9 </tr>
10 <tr>
11 <td>冯超</td>
12 <td>4401021881001341</td>
13 <td colspan="2" >男</td>
14 </tr>
15 <tr>
16 <td>冯超</td>
17 <td>4401021881001341</td>
18 <td colspan="2" >男</td>
19 </tr>
20 <tr>
21 <td colspan="4" ><b>联系方式</b></td>
22 </tr>
23 <tr>
24 <td>姓名</td>
25 <td>电话</td>
26 <td>地址</td>
27 <td>邮编</td>
28 </tr>
29 <tr>
30 <td>冯超</td>
31 <td>88888888</td>
32 <td>广州市天河XXXXXX路XXX号</td>
33 <td>510000</td>
34 </tr>
35 <tr>
36 <td>冯超</td>
37 <td>88888888</td>
38 <td>广州市天河XXXXXX路XXX号</td>
39 <td>510000</td>
40 </tr>
41 </table>
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
第二段代码改动为：
1<table cellpadding="0" cellspacing="0" border="1" width="100%" ID="Table1">
2 <tr>
3 <td>
4 <table cellpadding="0" cellspacing="0" width="100%" ID="Table2">
5 <tr>
6 <td colspan="3"><b>基本信息</b></td>
7 </tr>
8 <tr>
9 <td width="30%">姓名</td>
10 <td width="30%">身份证号码</td>
11 <td width="40%">性别</td>
12 </tr>
13 <tr>
14 <td>冯超</td>
15 <td>4401021881001341</td>
16 <td>男</td>
17 </tr>
18 <tr>
19 <td>冯超</td>
20 <td>4401021881001341</td>
21 <td>男</td>
22 </tr>
23 </table>
24 </td>
25 </tr>
26 <tr>
27 <td>
28 <table cellpadding="0" cellspacing="0" width="100%" ID="Table3">
29 <tr>
30 <td colspan="3"><b>联系方式</b></td>
31 </tr>
32 <tr>
33 <td width="20%">姓名</td>
34 <td width="15%">电话</td>
35 <td width="50%">地址</td>
36 <td width="15%">邮编</td>
37 </tr>
38 <tr>
39 <td>冯超</td>
40 <td>88888888</td>
41 <td>广州市天河XXXXXX路XXX号</td>
42 <td>510000</td>
43 </tr>
44 <tr>
45 <td>冯超</td>
46 <td>88888888</td>
47 <td>广州市天河XXXXXX路XXX号</td>
48 <td>510000</td>
49 </tr>
50 </table>
51 </td>
52 </tr>
53 </table>
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
呵呵，第一段代码改动了14处，第二段代码改动了8处。什么？你说这也没什么区别？要是一个内容多一点的页面改动呢？还认为没什么区别？算了，我给你一根绳子吧！
那么如何写好HTML代码呢？
1：尽量不要使用辅助的可见即可得的开发工具，即使用了，也要直接修改原代码进行优化。
2：对页面元素进行意群分割，就是最简单的分解思维，把同类元素放在一起，不同类的元素分开，彼此尽量松耦合，也就是面向对象中的“封装”思想。例如上面的例子就是用表格（table）来“封装”了不同意群的元素（个人信息、联系方式）。
3：少用或不用层、框架等“高级”功能，尽量使用表格（table）来隔离页面元素。
4：适当的注释。