简单实用的表格特效.docVIP

在我们制作主页的过程中，用到表格的地方非常多，灵活运用表格技巧可以为我们的网页增色不少，这里我就详细介绍几中特效表格的制作方法。 　　一、彩色虚线表格 虚 线 表 格 ＜style type=text/css＞＜!--.tab1 {border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;border-top-style: dotted;border-right-style: dotted;border-bottom-style: dotted;border-left-style: dotted;border-top-color: #00CC66;border-right-color: #0099CC;border-bottom-color: #FF0000;border-left-color: #6699FF;}--＞＜/style＞＜table width=200 border=0 cellpadding=2 cellspacing=2 class=tab1＞＜tr＞ ＜td＞＜div align=center＞虚＜/div＞＜/td＞＜td＞＜div align=center＞线＜/div＞＜/td＞＜/tr＞＜tr＞ ＜td＞＜div align=center＞表＜/div＞＜/td＞＜td＞＜div align=center＞格＜/div＞＜/td＞＜/tr＞＜/table＞ 　　二、鼠标指向单元格变色? ? ? onmouseout=this.style.backgroundColor= 鼠标离开效果onmouseover=this.style.backgroundColor=#FFcccc鼠标放上去的效果，可以修改#FFcccc的值来改变颜色＜table width=200 border=1 cellspacing=0 cellpadding=0＞＜tr＞ ＜td onmouseout=this.style.backgroundColor= onmouseover=this.style.backgroundColor=#FFcccc＞?＜/td＞＜/tr＞＜tr＞ ＜td onmouseout=this.style.backgroundColor= onmouseover=this.style.backgroundColor=#FFccaa＞?＜/td＞＜/tr＞＜/table＞? 　　三、立体表格? 立体 表格 ＜table border=1 bordercolorlight=#ffffff bordercolordark=#ffffff width=200 cellpadding=0 cellspacing=0＞＜tr align=center＞ ＜td width=86 bordercolorlight=#000000 bordercolordark=#eeeeee bgcolor=#B7B7B7 ＞立体＜/td＞＜td width=108 bordercolorlight=#000000 bordercolordark=#eeeeee bgcolor=#B7B7B7 ＞表格＜/td＞＜/tr＞＜/table＞　　四、表格嵌套　　1、利用表格的间距来做嵌套＜table width=200 border=1 cellspacing=4 cellpadding=0＞＜tr＞＜td＞?＜/td＞＜td＞?＜/td＞＜td＞?＜/td＞＜/tr＞＜/table＞主要是用到间距 cellspacing=4 ? ? ? 　　2、充分利用根据表格对齐的方式　　这里主要是将第一个表格居左，第二个表格居右，第三个表格居中。这样当你随意调整里面三个表格大小的时候，他们的间距将保持不变，非常方便。 ? ? ? ＜table width=200 border=1 cellpadding=0 cellspacing=0 bordercolor=#FF0000＞＜tr＞＜td＞＜table width=60 border=1 align=left cellpadding=0 cellspacing=0＞＜tr＞＜td＞?＜/td＞＜/tr＞＜/table＞＜table width=60 border=1 align=right cellpadding=0 cellspacing=0＞＜tr＞＜td＞?＜/td＞＜/tr＞