☆浅谈边框的制作方法(4)

认识表格的间距与边距

制作表格的时候，我们往往对表格的“间距”与“边距”这两个概念弄不清楚，因此，制作的边框难以达到理想的效果。

表格的“间距”，是指表格中单元格之间的距离；而表格的“边距”，是指单元格中的内容与单元格边线之间的距离。

下面的表格是一行四列的表格，也就是一行内有四个单元格的表格。

从图中我们可以看出，文字所在的小格子（即单元格）与外边的大方格边线之间有一个距离，这个距离就是表格的“间距”。而文字与小格子的边线之间也有一个距离，这个距离就是表格的“边距”。

表格1	表格2	表格3	表格4

上面的这个例子，比较好理解。但是，在制作边框的时候，我们一般是制作只有一个单元格的表格，而且是表格套表格的多层表格（也叫多重表格），每一层表格也只有一个单元格。像这样的表格，又如何理解间距和边距呢？又如何在制作的边框中分清楚哪一部分是间距，哪一部分是边距呢？

下面以二层表格为例，我们来认识一下表格的间距和边距。

<table border="3" cellSpacing="20" cellPadding="0" width="500" background="http://image9.360doc.com/DownloadImg/2010/05/1514/3209485_27.gif" bgColor="#00f200" align="center" height="100">
<tbody>
<tr>
<td>
<table border="3" cellSpacing="0" cellPadding="0" width="500" background="http://image55.360doc.com/DownloadImg/2012/09/0818/26704338_135" bgColor="#00f200" align="center" height="100">
<tbody>
<tr>
<td><p align="center">
<font style="font-size: 29px;" color="#ff0000" size="4"><b>认识表格的间距与边距</b></font>
</p></td></tr></tbody></table></td></tr></tbody></table>

这是一个二层表格的代码。外层的表格标签中，设置了3px宽的边框线，20px宽的间距。我们来看看其效果：

认识表格的间距与边距

黑色闪图部分就是外层表格。外层表格的最外面是3px宽的边框线，再往里面就是20px宽的间距。外层表格放置的内容是第二层表格。

把外层表格的边距：cellPadding="0"修改为：cellPadding="10"，外面再来看看其效果：

认识表格的间距与边距

外层表格中多出了一个方框，方框的外面就是外层表格的间距，方框的里面是外层表格的边距。

如果把第二层表格的间距：cellSpacing="0" 和边距：cellPadding="0"也修改一下，修改为间距：cellSpacing="20" 和边距：cellPadding="10"，我们再来观察其效果：

认识表格的间距与边距

我们可以看到，第二层表格中也多出了一个方框。方框的外面就是第二层表格的间距，方框的里面是第二层表格的边距。第二层表格中的内容是“认识表格的间距与边距”。

由此可见，我们制作的多层边框，每层表格显示出来的内容从外到内依次为：表格的边框线、表格的间距和表格的边距。（当然了，如果各层表格设置得规格不相同，还会显示出两层表格的高度差与宽度差，本文不作讨论。）

“春天没来”编撰

2013年8月16日于北京