多款表格边框单元格特殊效果代码

2011-12-19 综合应用 ℃

<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">细</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">表格加上了漂亮的细线</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">细</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">细</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">细</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">细</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">再进一步，把边框变成虚线</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">细</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">细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。</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>

相关特效代码: 弹出式窗口代码生成器11/18; 带注释的链接特效代码10/12; 下载速率统计表特效代码10/06; 首字母大写firstword特效代码10/06; 税款批量算特效代码10/06; 税款计算网页特效代码10/06; 强迫访问广告链接代码09/27; 检查显示器分辨率特效代码09/27; 超级计数器网页特效代码09/27; CSS实现区域内等比例放大缩小图片代码07/18

热门特效代码: 腾讯天气预报的JS代码; 点击“添加收藏”代码; 多款表格边框单元格特殊效果代码; CSS 横向图片列表; 网站连接速度测试JavaScript代码; 用CSS为表格添加阴影效果; 综合搜索引擎代码; 超级计数器网页特效代码; 强迫访问广告链接代码; nVida 网站图片滑动切换代码

推荐特效代码: 强迫访问广告链接代码; 点击“添加收藏”代码; CSS 横向图片列表; 常用的对联广告带关闭功能; 极品仿windows进度条效果; 漂亮的触发行变色代码