- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
如果你是一名网页设计人员,如果你的网页里没有一个表格,那可以说算不上一个网页(当然全FLASH作品除外),表格的重要性就可想而知。帮助我们控制网页布局、控制内容的显示等等。使用表格有很多的技巧,你可否知道呢?
使用表格排版网页
使用表格排版网页,可以使你的网页更美观,条理更清晰,更易于维护和更新。(将表格的宽设为100%,可以使网页的兼容性更好)
要尽量细化表格
不要把整个网页放在一个大的表格里,因为一个大表格里的内容要全部加载完才会显示,如果整个网页放在一个表格里,那么你的网页就只会两种情况:
1、全部不显示
2、全部显示出来
所以建议大家将整个页面分成几块,例如通用的上(放置Logo、Banner、Menu等等)、中(放置页面内容)、下(放置版权信息等等),将每一部分由单独的表格来实现,这样会好一些。
表格设计实例
创建一个表格,边框大小设为0(border=0),间距设为1(cellspacing=1),背景色设为深色(bgcolor=#000000),全部选定单无格,并将单无格的背景色设为浅色(如:bgcolor=#FFFFFF),这样可以得到一个细线边框的表格,请看下面的例子:
〈table width=50% border=0 cellspacing=1 bgcolor=#000000
tr bgcolor=#FFFFFF
td /td
td /td
/tr
tr bgcolor=#FFFFFF
td /td
td /td
/tr
/table〉
动态改变表格单元格的颜色
在单元格 td标记中加入以下代码,会动态改变单元格的颜色设置:
onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’”
在行标签 tr标记中加入上面代码,会动态改变一行的颜色设置。
〈table width=50% border=0 cellspacing=1 bgcolor=#000000
tr bgcolor=#FFFFFF onMouseOver=this.bgColor=#00CC00 onMouseOut=this.bgColor=#FFFFFF
td /td
td /td
/tr
tr bgcolor=#FFFFFF
td onMouseOver=this.bgColor=#FFFF00 onMouseOut=this.bgColor=#FFFFFF /td
td onMouseOver=this.bgColor=#FFFF00 onMouseOut=this.bgColor=#FFFFFF /td
/tr
/table〉
用表格替代水平线、竖直线
用表格代替水平线,插入一个表格,将高度设为1(按需要设定),当然也可以将宽度设为1,制作竖直线。
〈table width=100 border=0 align=center cellpadding=0 cellspacing=0
tr
td height=1 bgcolor=#000000 /td
/tr
/table
br
table height=100 border=0 align=center cellpadding=0 cellspacing=0
tr
td width=1 bgcolor=#000000 /td
/tr
/table〉
注意:在Dreamweaver里制作时,先将高设为1后,切换到代码窗口,将表格里的空格符去掉( ),如果不将空格去除的话,将看不到想要的效果了。/forum.php?mod=viewthreadtid=2152206
制作带有立体感的表格
在页面中适当的加入带有立体感的表格元素,会给你的页面添光加彩。
〈table width=30% border=1 align=center cellpadding=0 cellspacing=0 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CC
tr
tdA /td
td /td
/tr
tr
td /td
td /td
/tr
/table
br
table width=30% border=1 align=c
文档评论(0)