3、利用“cellpadding”属性制作等间距细线表格
我们可能经常在大网站中看到这种效果的表格：
这又是怎么做出来的呢，似乎让人有点摸不着头脑。我们来先来看看他的代码（注意红色部分的代码）
表格代码：
＜table width="420" border="0" cellspacing="2" cellpadding="1" height="10"＞
＜tr＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
代码好象很多，但理清它的结构后会发现其实并不复杂，它主要利用了表格的嵌套以及表格的“cellpadding”属性。在一个一行六列表格的每个单元格里又插入了一个这样一个表格：
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
在DreamWeaver中的快速通道
首先制作一个一行六列的表格，表格的属性面板设置如下：
将该表格每个单元格的背景色设置为黑色（注意：是单元格而不是整个表格），设置完后表格显示如下：
然后在每个单元格中插入一个表格，将插入表格的属性面板按如下设置就ok了。
需要注意的就是上面代码中加了红色的属性一个也不能少！
说明：cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。明白了这个属性后，上面的例子就不难理解。红色代码中width="100%"的意思是插入的表格的宽是被插入表格宽度的100%,也就是在宽度上把底下表格占满 ，但被插入的表格有这样一个属性cellpadding="1",所以就算是100%,被插入的表格也要在4边留下1px的空白距离.同理，height="100%"也就是在高度上也要顶满下面的表格,但由于被插入的表格的cellpadding="1"的原因,在上与下方都留了1px的空白距离。这样，在浏览器中显示的“表格边框”并不是真实的边框，而是被背景色填充的这“1px”的空白距离。
4、圆角表格的制作
|
