多款表格邊框單元格特殊效果代碼

2011-12-19 綜合應(yīng)用 ℃

<p>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="30">
    <tbody>
        <tr>
            <td bgcolor="#996600"><font color="#ff0000" size="5">表格邊框和單元格的特殊效果。</font></td>
        </tr>
    </tbody>
</table>
<table border="0" cellspacing="0" cellpadding="8" width="100%">
    <tbody>
        <tr valign="top">
            <td>
            <table border="1" cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td><font color="#008000">普</font></td>
                        <td><font color="#008000">表</font></td>
                    </tr>
                    <tr align="center">
                        <td><font color="#008000">通</font></td>
                        <td><font color="#008000">格</font></td>
                    </tr>
                </tbody>
            </table>
            <font color="#008000">這是一普通的表格</font></td>
            <td bgcolor="#003333"><font color="#00ff00"><table border="1" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td>普</td><td>表</td></tr><tr align="center"> <td>通</td><td>格</td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table border="0" cellspacing="1" cellpadding="0" width="200" bgcolor="#000000">
                <tbody>
                    <tr align="center" bgcolor="#ffffff">
                        <td bgcolor="#ffffff"><font color="#ff00ff">細(xì)</font></td>
                        <td bgcolor="#ffffff"><font color="#ff00ff">表</font></td>
                    </tr>
                    <tr align="center" bgcolor="#ffffff">
                        <td bgcolor="#ffffff"><font color="#ff00ff">線</font></td>
                        <td bgcolor="#ffffff"><font color="#ff00ff">格</font></td>
                    </tr>
                </tbody>
            </table>
            <font color="#ff00ff">表格加上了漂亮的細(xì)線</font>
            <p> </p>
            <p style="text-indent: 2em"> </p>
            </td>
            <td bgcolor="#660033"><font color="#ffff00"><table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" ><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">細(xì)</td><td bgcolor="#FFFFFF">表</td></tr><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">線</td><td bgcolor="#FFFFFF">格</td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td><font color="#008000">細(xì)</font></td>
                        <td><font color="#008000">表</font></td>
                    </tr>
                    <tr align="center">
                        <td><font color="#008000">線</font></td>
                        <td><font color="#008000">格</font></td>
                    </tr>
                </tbody>
            </table>
            <font color="#008000">這和上面那個可不一樣</font>
            <p> </p>
            <p style="text-indent: 2em"> </p>
            </td>
            <td bgcolor="#003333"><font color="#00ffff"><table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td style=" BORDER-right: rgb(0,0,0) 1px groove">細(xì)</td><td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">表</td></tr><tr align="center"> <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">線</td><td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">格</td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td><font color="#993366">細(xì)</font></td>
                        <td><font color="#993366">表</font></td>
                    </tr>
                    <tr align="center">
                        <td><font color="#993366">線</font></td>
                        <td><font color="#993366">格</font></td>
                    </tr>
                </tbody>
            </table>
            <font color="#993366">再進(jìn)一步，把邊框變成虛線</font></td>
            <td bgcolor="#660033"><font color="#ff00ff"><table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">細(xì)</td><td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td></tr><td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">線</td><td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table border="0" cellspacing="2" cellpadding="0" width="200">
                <tbody>
                    <tr>
                        <td>
                        <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"><font color="#008000">心</font></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td>
                        <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"><font color="#008000">想</font></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"><font color="#008000">事</font></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td>
                        <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"><font color="#008000">成</font></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            <font color="#008000">細(xì)線表格的擴(kuò)展應(yīng)用，奧妙就是在第個單元格中再套入一個表格。</font></td>
            <td bgcolor="#003333"><font color="#ffff00"><table width="200" border="0" cellspacing="2" cellpadding="0"><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td></tr><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table border="1" cellspacing="0" bordercolorlight="#ffffff" bordercolordark="#ffffff" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td bgcolor="#b7b7b7" bordercolorlight="#000000" bordercolordark="#eeeeee"><font color="#800080">立</font></td>
                        <td bgcolor="#b7b7b7" bordercolorlight="#000000" bordercolordark="#eeeeee"><font color="#800080">表</font></td>
                    </tr>
                    <tr align="center">
                        <td bgcolor="#b7b7b7" bordercolorlight="#000000" bordercolordark="#eeeeee"><font color="#800080">體</font></td>
                        <td bgcolor="#b7b7b7" bordercolorlight="#000000" bordercolordark="#eeeeee"><font color="#800080">格</font></td>
                    </tr>
                </tbody>
            </table>
            <font color="#800080">立體感的表格</font>
            <p> </p>
            <p style="text-indent: 2em"> </p>
            </td>
            <td bgcolor="#660033"><font color="#00ffff"><table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td></tr><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >體</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr>
                        <td><fieldset align="center"><legend><font color="#008000">無名表格</font> </legend>
                        <p> </p>
                        <p style="text-indent: 2em"> </p>
                        </fieldset></td>
                    </tr>
                </tbody>
            </table>
            <font color="#008000">給表格加上一個表頭</font>
            <p> </p>
            <p style="text-indent: 2em"> </p>
            </td>
            <td bgcolor="#003333"><font color="#ff0000"><table width="200" cellpadding="0" cellspacing="0"><tr> <td><fieldset style="width:200" align="center"> <legend> 無名表格 </legend> <p align="right"> </fieldset></td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr>
                        <td><fieldset align="center"><legend><font color="#993366">表中表效果</font></legend>
                        <p> </p>
                        <p style="text-indent: 2em"> </p>
                        </fieldset></td>
                    </tr>
                </tbody>
            </table>
            <font color="#993366">給表頭再加個框</font>
            <p> </p>
            <p style="text-indent: 2em"> </p>
            </td>
            <td bgcolor="#660033"><font color="#99cc00"><table width="200"" cellspacing="0" cellpadding="0"><tr> <td><fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center"> <legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend> <br></fieldset></td></tr></table></font></td>
        </tr>
        <tr valign="top">
            <td>
            <table width="200">
                <tbody>
                    <tr>
                        <td><fieldset align="center"><legend>
                        <table cellspacing="1" cellpadding="0" width="80" height="20">
                            <tbody>
                                <tr>
                                    <td><font color="#339966">表中表效果</font></td>
                                </tr>
                            </tbody>
                        </table>
                        </legend>
                        <p> </p>
                        <p style="text-indent: 2em"> </p>
                        </fieldset></td>
                    </tr>
                </tbody>
            </table>
            <font color="#339966">看起來和上面的一樣，可是這個才是真正的表中表哦。</font>
            <p> </p>
            <p style="text-indent: 2em"> </p>
            </td>
            <td bgcolor="#003333"><font color="#ff6600"><table width="200"><tr> <td><fieldset style="width:200" align="center"> <legend> <table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20"><tr> <td><font color=blue>表中表效果Ⅱ</font></td></tr></table></legend><br></fieldset></td></tr></table></font></td>
        </tr>
    </tbody>
</table>
</p>

相關(guān)特效代碼: 彈出式窗口代碼生成器11/18; 帶注釋的鏈接特效代碼10/12; 下載速率統(tǒng)計(jì)表特效代碼10/06; 首字母大寫firstword特效代碼10/06; 稅款批量算特效代碼10/06; 稅款計(jì)算網(wǎng)頁特效代碼10/06; 強(qiáng)迫訪問廣告鏈接代碼09/27; 檢查顯示器分辨率特效代碼09/27; 超級計(jì)數(shù)器網(wǎng)頁特效代碼09/27; CSS實(shí)現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片代碼07/18

熱門特效代碼: 騰訊天氣預(yù)報(bào)的JS代碼; 點(diǎn)擊“添加收藏”代碼; 多款表格邊框單元格特殊效果代碼; CSS 橫向圖片列表; 網(wǎng)站連接速度測試JavaScript代碼; 用CSS為表格添加陰影效果; 綜合搜索引擎代碼; 超級計(jì)數(shù)器網(wǎng)頁特效代碼; 強(qiáng)迫訪問廣告鏈接代碼; nVida 網(wǎng)站圖片滑動切換代碼

推薦特效代碼: 強(qiáng)迫訪問廣告鏈接代碼; 點(diǎn)擊“添加收藏”代碼; CSS 橫向圖片列表; 常用的對聯(lián)廣告帶關(guān)閉功能; 極品仿windows進(jìn)度條效果; 漂亮的觸發(fā)行變色代碼