我们可能经常在大网站中看到这种效果的表格：


　　这又是怎么做出来的呢，似乎让人有点摸不着头脑。我们来先来看看他的代码（注意红色部分的代码）

表格代码：
＜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”的空白距离。

此新闻共有5页 上一页 1 2 3 4 5 下一页
·快速精通FRAME（下）
·快速精通FRAME（上）
·表格使用的常见问题及解决方法
·活用表格美化网页
·网页表格制作进阶
·玩转表单之常用技巧（二）
·玩转表单之常用技巧（一）
·玩转表单之表单提交（二）
·玩转表单之表单提交（一）
·玩转表单之花样表单（四）

www.xxol.net
星河
2004-9-22 8:17:30

天极Yesky
潇湘在线
www.xxol.net www.07391.com img.hk.cn www.xianggangditu.cn www.neiyibar.com
网站运营策划 邵阳网站大全 邵阳人才网 邵阳信息网 邵阳网站建设 香港图片 香港地图 生产线 内衣品牌 情趣内衣 流水线www.sunlsx.com.cn 性感内衣 流水线
Copyright © 2002-2005 www.xxol.net All rights reserved.
潇湘在线 版权所有 ICP证：湘ICP备05000248号