在我們制作主頁的過程中，用到表格的地方非常多，靈活運用表格技巧可以為我們的網(wǎng)頁增色不少，這里我就詳細(xì)介紹幾中特效表格的制作方法。 <br><br><br>　　一、彩色虛線表格<br><br>虛 線 <br>表 格 <br><br><br><br>＜style type=&xqypictext/css&xqypic＞<br>＜!--<br>.tab1 {<br>border-top-width: thin;<br>border-right-width: thin;<br>border-bottom-width: thin;<br>border-left-width: thin;<br>border-top-style: dotted;<br>border-right-style: dotted;<br>border-bottom-style: dotted;<br>border-left-style: dotted;<br>border-top-color: #00CC66;<br>border-right-color: #0099CC;<br>border-bottom-color: #FF0000;<br>border-left-color: #6699FF;<br>}<br>--＞<br>＜/style＞<br>＜table width=&xqypic200&xqypic border=&xqypic0&xqypic cellpadding=&xqypic2&xqypic cellspacing=&xqypic2&xqypic class=&xqypictab1&xqypic＞<br>＜tr＞ <br>＜td＞＜div align=&xqypiccenter&xqypic＞虛＜/div＞＜/td＞<br>＜td＞＜div align=&xqypiccenter&xqypic＞線＜/div＞＜/td＞<br>＜/tr＞<br>＜tr＞ <br>＜td＞＜div align=&xqypiccenter&xqypic＞表＜/div＞＜/td＞<br>＜td＞＜div align=&xqypiccenter&xqypic＞格＜/div＞＜/td＞<br>＜/tr＞<br>＜/table＞<br><br><br>　　二、鼠標(biāo)指向單元格變色<br>&nbsp;&nbsp;　 <br>　 <br><br><br><br>onmouseout=&xqypicthis.style.backgroundColor=\'\'&xqypic 鼠標(biāo)離開效果onmouseover=&xqypicthis.style.backgroundColor=\'#FFcccc\'&xqypic鼠標(biāo)放上去的效果，<br>可以修改#FFcccc的值來改變顏色<br><br>＜table width=&xqypic200&xqypic border=&xqypic1&xqypic cellspacing=&xqypic0&xqypic cellpadding=&xqypic0&xqypic＞<br>＜tr＞ <br>＜td onmouseout=&xqypicthis.style.backgroundColor=\'\'&xqypic onmouseover=&xqypicthis.style.backgroundColor=\'#FFcccc\'&xqypic＞ ＜/td＞<br>＜/tr＞<br>＜tr＞ <br>＜td onmouseout=&xqypicthis.style.backgroundColor=\'\'&xqypic onmouseover=&xqypicthis.style.backgroundColor=\'#FFccaa\'&xqypic＞ ＜/td＞<br>＜/tr＞<br>＜/table＞<br><br>　　三、立體表格<br>&nbsp;&nbsp;<br><br>立體 表格 <br><br><br>＜table border=&xqypic1&xqypic bordercolorlight=&xqypic#ffffff&xqypic bordercolordark=&xqypic#ffffff&xqypic width=&xqypic200&xqypic cellpadding=&xqypic0&xqypic cellspacing=&xqypic0&xqypic＞<br>＜tr align=&xqypiccenter&xqypic＞ <br>＜td width=&xqypic86&xqypic <br>bordercolorlight=&xqypic#000000&xqypic bordercolordark=&xqypic#eeeeee&xqypic bgcolor=&xqypic#B7B7B7&xqypic ＞立體＜/td＞<br>＜td width=&xqypic108&xqypic <br>bordercolorlight=&xqypic#000000&xqypic bordercolordark=&xqypic#eeeeee&xqypic bgcolor=&xqypic#B7B7B7&xqypic ＞表格＜/td＞<br>＜/tr＞<br>＜/table＞<br><br>　　四、表格嵌套<br><br>　　1、利用表格的間距來做嵌套<br><br>＜table width=&xqypic200&xqypic border=&xqypic1&xqypic cellspacing=&xqypic4&xqypic cellpadding=&xqypic0&xqypic＞<br>＜tr＞<br>＜td＞ ＜/td＞<br>＜td＞ ＜/td＞<br>＜td＞ ＜/td＞<br>＜/tr＞<br>＜/table＞<br>主要是用到間距 cellspacing=&xqypic4&xqypic<br><br><br>　 　 　 <br><br><br>　　2、充分利用根據(jù)表格對齊的方式<br><br>　　這里主要是將第一個表格居左，第二個表格居右，第三個表格居中。這樣當(dāng)你隨意調(diào)整里面三個表格大小的時候，他們的間距將保持不變，非常方便。<br><br><br><br>　 <br>　 <br>　 <br><br><br><br>＜table width=&xqypic200&xqypic border=&xqypic1&xqypic cellpadding=&xqypic0&xqypic cellspacing=&xqypic0&xqypic bordercolor=&xqypic#FF0000&xqypic＞<br>＜tr＞<br>＜td＞＜table width=&xqypic60&xqypic border=&xqypic1&xqypic align=&xqypicleft&xqypic cellpadding=&xqypic0&xqypic cellspacing=&xqypic0&xqypic＞<br>＜tr＞<br>＜td＞ ＜/td＞<br>＜/tr＞<br>＜/table＞<br>＜table width=&xqypic60&xqypic border=&xqypic1&xqypic align=&xqypicright&xqypic cellpadding=&xqypic0&xqypic cellspacing=&xqypic0&xqypic＞<br>＜tr＞<br>＜td＞ ＜/td＞<br>＜/tr＞<br>＜/table＞<br>＜table width=&xqypic80&xqypic border=&xqypic1&xqypic align=&xqypiccenter&xqypic cellpadding=&xqypic0&xqypic cellspacing=&xqypic0&xqypic＞<br>＜tr＞<br>＜td＞ ＜/td＞<br>＜/tr＞<br>＜/table＞＜/td＞<br>＜/tr＞<br>＜/table＞<br><br>　　五、半透明表格<br><br><br><br>半 透明 <br>表 格 <br><br><br>　　這里主要是用到了CSS濾鏡filter: Alpha(Opacity=20)。<br><br>＜style type=&xqypictext/css&xqypic＞<br>＜!--<br>.bg {<br>background-color: #66CCFF;<br>filter: Alpha(Opacity=20);<br>}<br>--＞ <br>＜table width=&xqypic200&xqypic border=&xqypic0&xqypic cellpadding=&xqypic0&xqypic cellspacing=&xqypic0&xqypic class=&xqypicbg&xqypic＞<br>＜tr＞ <br>＜td＞＜div align=&xqypiccenter&xqypic＞半＜/div＞＜/td＞<br>＜td＞＜div align=&xqypiccenter&xqypic＞透明＜/div＞＜/td＞<br>＜/tr＞<br>＜tr＞ <br>＜td＞＜div align=&xqypiccenter&xqypic＞表＜/div＞＜/td＞<br>＜td＞＜div align=&xqypiccenter&xqypic＞格＜/div＞＜/td＞<br>＜/tr＞<br>＜/table＞<br><br>　　六、陰影表格<br><br><br><br>111 222 333 <br><br>　　這里主要用到了CSS濾鏡style=&xqypicfilter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10&xqypic<br><br>＜div style=&xqypicfilter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10&xqypic＞ <br>＜table width=300 border=1 bgcolor=#EAEAEA＞<br>＜tr＞＜td width=&xqypic93&xqypic＞111＜/td＞＜td width=&xqypic91&xqypic＞222＜/td＞＜td width=&xqypic94&xqypic＞333＜/td＞＜/tr＞<br>＜/table＞<br>＜/div＞<br><br>　　附：插入CSS樣式的方法（我們這里用半透明表格來做說明)<br>　　第一種方法是定義一個CSS名稱。<br>　　比如<br>＜style type=&xqypictext/css&xqypic＞<br>＜!--<br>.bg {<br>background-color: #66CCFF;<br>filter: Alpha(Opacity=20);<br>}<br>--＞ <br>　　元素需要用到CSS的時候，比如表格，定義一個CLASS就可以了，如<br>＜table width=&xqypic200&xqypic border=&xqypic0&xqypic cellpadding=&xqypic0&xqypic cellspacing=&xqypic0&xqypic class=&xqypicbg&xqypic＞<br><br>　　第二種是直接在你需要用到CSS元素的地方插入相關(guān)代碼，style=&xqypic&xqypic如：<br>＜table width=&xqypic201&xqypic border=&xqypic1&xqypic style=&xqypicfilter: Alpha(Opacity=20);background-color: #66CCFF;&xqypic＞