欢迎来到天天文库
浏览记录
ID:35200664
大小:29.00 KB
页数:5页
时间:2019-03-21
《html表格使用从入门到精通》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、HTML表格使用从入门到精通如果你是一名网页设计人员,如果你的网页里没有一个表格,那可以说算不上一个网页(当然全FLASH作品除外),表格的重要性就可想而知。帮助我们控制网页布局、控制内容的显示等等。使用表格有很多的技巧,你可否知道呢? 使用表格排版网页 使用表格排版网页,可以使你的网页更美观,条理更清晰,更易于维护和更新。(将表格的宽设为100%,可以使网页的兼容性更好) 要尽量细化表格 不要把整个网页放在一个大的表格里,因为一个大表格里的内容要全部加载完才会显示,如果整个网页放在一个表格里
2、,那么你的网页就只会两种情况: 1、全部不显示 2、全部显示出来 所以建议大家将整个页面分成几块,例如通用的上(放置Logo、Banner、Menu等等)、中(放置页面内容)、下(放置版权信息等等),将每一部分由单独的表格来实现,这样会好一些。 表格设计实例 创建一个表格,边框大小设为0(border=0),间距设为1(cellspacing="1"),背景色设为深色(bgcolor="#000000"),全部选定单无格,并将单无格的背景色设为浅色(如:bgcolor="#FFFFFF"),
3、这样可以得到一个细线边框的表格,请看下面的例子: 〈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>标记中加入
4、以下代码,会动态改变单元格的颜色设置: onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’” 在行标签< tr>标记中加入上面代码,会动态改变一行的颜色设置。 〈table width="50%" border="0" cellspacing="1" bgcolor="#000000"> < tr bgcolor="#FFFFFF" onMouseOver="this.bgColor=’#00CC00’" onMouseOut=
5、"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’">
6、 < /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> < tabl
7、e height="100" border="0" align="center" cellpadding="0" cellspacing="0"> < tr> < td width="1" bgcolor="#000000">< /td> < /tr> < /table〉 注意:在Dreamweaver里制作时,先将高设为1后,切换到代码窗口,将表格里的空格符去掉( ),如果不将空格去除的话,将看不到想要的效果了。 制作带有立体感的表格 在页面中适当的加入带有立体感的表格元素,会给你的页
8、面添光加彩。 〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC"> < tr> < td>A< /td> < td> < /td> < /tr> < tr> < td> < /td> < td> < /td
此文档下载收益归作者所有