cellpadding,cellspacing,border对width和height的影响

本文是为了回答一个问题http://topic.csdn.net/u/20080919/09/a6eb73bf-1311-44ec-9170-40ad19c3021b.html?seed=498392399而讨论的.

 

先给出相应的概念:

cellpadding是单元格的元素与边界的距离
cellspacing是单元格与单元格之间的距离
border是边框的大小

 

讨论的例子:

1. <table border="2" width="100" height="100" cellpadding="10" cellspacing="10"> 
2.             <tr> 
3.                 <td> </td> 
4.                 <td> </td> 
5.             </tr> 
6.             <tr> 
7.                 <td> </td> 
8.                 <td> </td> 
9.             </tr>            
10.         </table> 

为了说明问题,我加了几个例子进去:

1. <table>
2. <tr><td>
3. <table border="2" width="100" height="100" cellpadding="10" cellspacing="10"> 
4.             <tr> 
5.                 <td></td> 
6.                 <td></td> 
7.             </tr> 
8.             <tr> 
9.                 <td></td> 
10.                 <td></td> 
11.             </tr>            
12.         </table> 
13. </td><td>
14. <table border="2" width="100" height="100" cellpadding="0" cellspacing="0"> 
15.             <tr> 
16.                 <td></td> 
17.                 <td></td> 
18.             </tr> 
19.             <tr> 
20.                 <td></td> 
21.                 <td></td> 
22.             </tr>            
23.         </table> 
24. </td><td>
25. <table border="2" width="100" height="100" cellpadding="10" cellspacing="10"> 
26.             <tr> 
27.                 <td>1</td> 
28.                 <td>2</td> 
29.             </tr> 
30.             <tr> 
31.                 <td>3</td> 
32.                 <td>4</td> 
33.             </tr>            
34.         </table> 
35. </td><td>
36. <table border="2" width="100" height="100" cellpadding="50" cellspacing="50"> 
37.             <tr> 
38.                 <td></td> 
39.                 <td></td> 
40.             </tr> 
41.             <tr> 
42.                 <td></td> 
43.                 <td></td> 
44.             </tr>            
45.         </table> 
46. </td></tr>
47. </table>

截图是这样的:

 

根据例子,可以随意改变下三个属性的值,就可以发现,只要它们的值的和不大与总的宽和高,整个表格是不会被撑大的^-^

如果大于了,就回撑大整个表格的大小了.

 

如果还是没有清楚怎么撑大的,可以去搜索下表格的"盒子布局",可能会有帮助.

 

小结

多谢qq463076778,让我突想研究清楚这个东西,就做了点试试.文章难度不大,不过,初学HTML者弄清楚表格是很关键的.