HTML表格使用从初涉到精通.doc

HTML表格使用从入门到精通如果你是一名网页设计人员，如果你的网页里没有一个表格，那可以说算不上一个网页(当然全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后，切换到代码窗口，将表格里的空格符去掉(?)，如果不将空格去除的话，将看不到想要的效果了。 　　制作带有立体感的表格 　　在页面中适当的加入带有立体感的表格元素，会给你的页面添光加彩。 　　〈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 　　?/tabl