简单实用的网页表格特效-Dreamweaver教程

一、彩色虚线表格

虚 线
表 格

＜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＞
＜/table＞
＜table width=\"80\" border=\"1\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞＜/td＞
＜/tr＞
＜/table＞
五、半透明表格

半 透明
表 格

　　这里主要是用到了CSS滤镜filter: Alpha(Opacity=20)。

＜style type=\"text/css\"＞
＜!--
.bg {
background-color: #66CCFF;
filter: Alpha(Opacity=20);