HTML表格入门.doc

HTML表格入门使用表格排版网页 使用表格排版网页，可以使你的网页更美观，条理更清晰，更易于维护和更新。（将表格的宽设为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 /table br table width=30% border=1 align=center cellpadding=1 cellspacing=2 bgcolor=#9999CC tr tdB/td td /td /tr tr td /td td /td /tr /table br table width=30% border=1 align=center cellpadding=1 cellspacing=2 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CC tr tdC/td td /td /tr tr td /td td /td /tr /table 小技巧：效果图中的凸凹效果，完全是由bordercoloer的颜色来控制的，它的颜色浅一些，有会有凸出的效果，它的颜色深一点，就会有凹陷的效果。 隐藏表格的分隔线 在处理表格时有时会有这样的需求，某几列、或行的内容属于同一主题，为了排列整齐将它们放在不同的行上，但是不想让表格的分隔线显示出来，有什么办法吗，其实很简单。隐藏水平分隔线 table border rules=cols cellspacing=0 align=left 隐藏竖直分隔线 table border rules=rows cellspacing=0 align=left 隐藏全部分隔线 table border rules=none cellspacing=0 align=left 表格内容分行下载 表格内有一些载入较慢的元素（如计数器、大图片等等）时，往往会延迟整个表格的显示