使用CSS去除表格默认样式的间距

还是网页设计的问题,这次遇到的是表格填充和间距的问题,我们使用DW添加表格后,会发现表格有默认的填充和间距,如下图所示:





使用DW属性面板里面的设置可以轻松为我们解决这个问题,先选中表格,



然后将这两属性都设置为0,表格的填充和间距都去掉了,对应代码和截图如下:

<table width="300px" border="0" cellpadding="0"
cellspacing="0">

<tr>

<td>
</td>

<td>
</td>

<td>
</td>

</tr>

<tr>

<td>
</td>

<td>
</td>

<td>
</td>

</tr>

<tr>

<td>
</td>

<td>
</td>

<td>
</td>

</tr>

</table>

很明显,代码中的cellpadding="0" cellspacing="0"分别控制表格单元的填补和间距.





确实很完美,可是,如果要你使用CSS样式表来实现同样功能会怎么样呢?

先来写两个类

<style
type="text/css">

.style-table

{

border:0px;

border-collapse: collapse;

}

.style-table td,th{

padding: 0;

}

</style>

然后我们将这样式表套用到表格中,貌似没发生什么变化,如下图:





>.<

但是我们用浏览器看看呢,一片白茫茫的,唉

我还有法子呢,用它来拼图,有没缝隙一目了然,我找了我做网站的板块图,当然是已经切好了的,




在DW中还是看得有缝隙,再用浏览器看看,居然完美的拼起来了^_^





这虽然是小问题,但还是挺有有意义的,至少可以解决表格排版的问题!