cellpadding和cellspacing属性来控制表格边框的间距

作者: 伊缘 分类: ||Words|| 发布时间: 2010-04-27 00:21

巢(cell) — 表格的内容
巢补白(表格填充)(cellpadding) — 代表巢外面的一个距离,用于隔开巢与巢空间
巢空间(表格间距)(cellspacing) — 代表表格边框与巢补白的距离,也是巢补白之间的距离
上图说明了表格的几个属性,其中黑色部分就是巢(cell),白色的区域是巢补白(表格填充),灰色的区域是巢空间(表格间距)。

cellpadding和cellspacing属性来控制表格边框的间距。
cellspacing 设置表格边框和单元格之间的间距(以像素为单位)
cellpadding 设置单元格中的内容与单元格边框的间距(也是以像素为单位)

看这个例子:

<table cellspacing=”0″ cellpadding=”0″>
<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>

<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>
</table>

可以看到这是我们常见的TABLE设置,那如何将cellpadding和cellspacing这两个属性用CSS来定义呢?

下面看几个例子,相信看完以后,你就明白如何去用CSS定义cellpadding和cellspacing这两个属性了。

======================================
例子一:

<style type=”text/css”>
table     {border-collapse:collapse;} #相当于 cellspacing=”0″
table td {padding:0;}                          #相当于 cellpadding=”0″
</style>

<table>
<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>

<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>
</table>

======================================
例子二:

<style type=”text/css”>
.tbl     {border-collapse:collapse;} #相当于 cellspacing=”0″
.tbl td {padding:0;}                          #相当于 cellpadding=”0″
</style>

<table class=”tbl”>
<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>

<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>
</table>

======================================
例子三:

<style type=”text/css”>
.mydiv table     {border-collapse:collapse;} #相当于 cellspacing=”0″
.mydiv table td {padding:0;}                         #相当于 cellpadding=”0″
</style>

<div class=”mydiv”>
<table>
<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>

<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>
</table>

<table>
<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>

<tr>
<td>…….</td>
<td>…….</td>
<td>…….</td>
</tr>
</table>
</div>