table中cellspacing和cellpadding的区别

在table中我们经常使用cellspacing和cellpadding来增加单元格之间的间距,二者起到的效果貌似差不多,但是他们实现的方式确实不一样的,下面看一下它们之间的区别吧!

cellpadding: 表示单元格(

<td>

)内边距到其内容之间的距离

看下图: 绿色表示td的背景色,也就是表示td的大小, 1001表示td中的内容.图中标注的10px就是

cellpadding

设置的距离.

<table cellpadding = "10px">

</table>

可以看出,在其内容不变的情况下,cellpadding越大,单元格td也就被撑的越大.这也就导致了看上去单元格之间的距离变大了,其实是单元格被撑大了而已.

cellspacing:表示单元格与单元格之间的距离:

设置

cellspacing="30px"

起到的作用:



由图可以看出,td的大小其实就是背景色那么大,但是两个单元格的距离却变大了,这主要是设置cellspacing起到的效果.