认识表格的间距与边距
制作表格的时候，我们往往对表格的“间距”与“边距”这两个概念弄不清楚，因此，制作的边框难以达到理想的效果。
表格的“间距”，是指表格中单元格之间的距离；而表格的“边距”，是指单元格中的内容与单元格边线之间的距离。
下面的表格是一行四列的表格，也就是一行内有四个单元格的表格。
从图中我们可以看出，文字所在的小格子（即单元格）与外边的大方格边线之间有一个距离，这个距离就是表格的“间距”。而文字与小格子的边线之间也有一个距离，这个距离就是表格的“边距”。
表格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日于北京
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
