`

table 边框样式css

    博客分类：
  • CSS
CSSIE
阅读更多
<html>
<body>
    <table class="t FCK__ShowTableBorders" cellspacing="0" cellpadding="8" width="600" border="0">
    <tbody>
        <tr>
            <td width="220">
            <table cellspacing="0" cellpadding="0" rules="cols" width="200" border="1">
                <tbody>
                    <tr align="center">
                        <td>第</td>
                        <td>一</td>
                        <td>行</td>
                    </tr>
                    <tr align="center">
                        <td>第</td>
                        <td>二</td>
                        <td>行</td>
                    </tr>
                    <tr align="center">
                        <td>第</td>
                        <td>三</td>
                        <td>行</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td width="380">这个表格去掉了单元格之间的纵向分隔线</td>
        </tr>
        <tr>
            <td><br>
            <table cellspacing="0" cellpadding="0" rules="rows" width="200" border="1">
                <tbody>
                    <tr align="center">
                        <td>第</td>
                        <td>第</td>
                        <td>第</td>
                    </tr>
                    <tr align="center">
                        <td>一</td>
                        <td>二</td>
                        <td>三</td>
                    </tr>
                    <tr align="center">
                        <td>列</td>
                        <td>列</td>
                        <td>列</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>这个表格去掉了单元格之间的横向分隔线</td>
        </tr>
        <tr>
            <td>
            <table cellspacing="0" cellpadding="0" rules="none" width="200" border="1">
                <tbody>
                    <tr align="center">
                        <td>横</td>
                        <td> </td>
                        <td>线</td>
                    </tr>
                    <tr align="center">
                        <td>竖</td>
                        <td> </td>
                        <td>线</td>
                    </tr>
                    <tr align="center">
                        <td>都</td>
                        <td>没</td>
                        <td>了</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>这个表格去掉了单元格之间的纵向分隔线和横向分隔线</td>
        </tr>
        <tr>
            <td colspan="2"><hr color="#000000" size="1">
            　　其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到&lt;TABLE&gt;标签中都有rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。</td>
        </tr>
    </tbody>
</table>
<br>
<br>
<br>
<table class="FCK__ShowTableBorders" height="30" cellspacing="0" cellpadding="0" width="600" border="0">
    <tbody>
        <tr>
            <td><strong>二、表格边框的隐藏</strong></td>
        </tr>
    </tbody>
</table>
<table class="t FCK__ShowTableBorders" cellspacing="0" cellpadding="8" width="600" border="0">
    <tbody>
        <tr>
            <td>
            <table cellspacing="0" cellpadding="0" width="200" border="1">
                <tbody>
                    <tr align="center">
                        <td>普</td>
                        <td>表</td>
                    </tr>
                    <tr align="center">
                        <td>通</td>
                        <td>格</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>这是一普通的表格</td>
        </tr>
        <tr>
            <td><br>
            <table cellspacing="0" cellpadding="0" width="200" border="1" frame="above">
                <tbody>
                    <tr align="center">
                        <td>不怕</td>
                        <td>下雨</td>
                    </tr>
                    <tr align="center">
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>只显示上边框</td>
        </tr>
        <tr>
            <td>
            <table cellspacing="0" cellpadding="0" width="200" border="1" frame="below">
                <tbody>
                    <tr>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td align="center">下起雨来</td>
                        <td align="center">该怎么办</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>只显示下边框</td>
        </tr>
        <tr>
            <td><br>
            <table cellspacing="0" cellpadding="0" width="200" border="1" frame="vsides">
                <tbody>
                    <tr>
                        <td align="center">上不着天</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td align="center">下不着地</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>只显示左、右边框</td>
        </tr>
        <tr>
            <td>
            <table cellspacing="0" cellpadding="0" width="200" border="1" frame="hsides">
                <tbody>
                    <tr>
                        <td> </td>
                        <td align="center">两边走开</td>
                    </tr>
                    <tr>
                        <td align="center">老子姓王</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>只显示上、下边框</td>
        </tr>
        <tr>
            <td><br>
            <table cellspacing="0" cellpadding="0" width="200" border="1" frame="lhs">
                <tbody>
                    <tr>
                        <td width="100">左右</td>
                        <td width="100"> </td>
                    </tr>
                    <tr>
                        <td>为难</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>只显示左边框</td>
        </tr>
        <tr>
            <td>
            <table cellspacing="0" cellpadding="0" width="200" border="1" frame="rhs">
                <tbody>
                    <tr>
                        <td width="100"> </td>
                        <td align="right" width="100">左右</td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td align="right">为难</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>只显示右边框</td>
        </tr>
        <tr>
            <td><br>
            <table cellspacing="0" cellpadding="0" width="200" border="1" frame="void">
                <tbody>
                    <tr>
                        <td align="right">光秃秃</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td align="left">全脱了</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>不显示任何边框</td>
        </tr>
        <tr>
            <td colspan="2"><hr color="#000000" size="1">
            表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。<br>
            只显示上边框 &lt;table frame=above&gt;<br>
            只显示下边框 &lt;table frame=below&gt; <br>
            只显示左、右边框 &lt;table frame=vsides&gt;<br>
            只显示上、下边框 &lt;table frame=hsides&gt;<br>
            只显示左边框 &lt;table frame=lhs&gt;<br>
            只显示右边框 &lt;table frame=rhs&gt;<br>
            不显示任何边框 &lt;table frame=void&gt;</td>
        </tr>
    </tbody>
</table>
<p> </p>
<table class="FCK__ShowTableBorders" height="30" cellspacing="0" cellpadding="0" width="600" border="0">
    <tbody>
        <tr>
            <td><strong>三、表格边框</strong></td>
        </tr>
    </tbody>
</table>
<table class="t FCK__ShowTableBorders" cellspacing="0" cellpadding="8" width="600" border="0">
    <tbody>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200" border="1">
                <tbody>
                    <tr align="center">
                        <td>普</td>
                        <td>表</td>
                    </tr>
                    <tr align="center">
                        <td>通</td>
                        <td>格</td>
                    </tr>
                </tbody>
            </table>
            这是一普通的表格</td>
            <td>&lt;table border=&quot;1&quot; width=&quot;200&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt; &lt;tr align=&quot;center&quot;&gt; &lt;td&gt;普&lt;/td&gt; &lt;td&gt;表&lt;/td&gt; &lt;/tr&gt; &lt;tr align=&quot;center&quot;&gt; &lt;td&gt;通&lt;/td&gt; &lt;td&gt;格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="200" bgcolor="#000000" border="0">
                <tbody>
                    <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>
                </tbody>
            </table>
            表格加上了漂亮的细线<br>
            (利用cellspacing1像素间隙和表格与单元格背景的不同)</td>
            <td>&lt;table border=&quot;0&quot; width=&quot;200&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot; &gt; &lt;tr align=&quot;center&quot; bgcolor=&quot;#FFFFFF&quot;&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;细&lt;/td&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;表&lt;/td&gt; &lt;/tr&gt; &lt;tr align=&quot;center&quot; bgcolor=&quot;#FFFFFF&quot;&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;线&lt;/td&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td style="border-right: rgb(0,0,0) 1px groove; border-top: rgb(0,0,0) 1px groove; border-left: rgb(0,0,0) 1px groove; border-bottom: rgb(0,0,0) 1px groove">细</td>
                        <td style="border-right: rgb(0,0,0) 1px groove; border-top: rgb(0,0,0) 1px groove; border-bottom: rgb(0,0,0) 1px groove">表</td>
                    </tr>
                    <tr align="center">
                        <td style="border-right: rgb(0,0,0) 1px groove; border-left: rgb(0,0,0) 1px groove; border-bottom: rgb(0,0,0) 1px groove">线</td>
                        <td style="border-right: rgb(0,0,0) 1px groove; border-bottom: rgb(0,0,0) 1px groove">格</td>
                    </tr>
                </tbody>
            </table>
            这和上面那个可不一样，它用的是CSS，效果却一样。<br>
            (对单元格border的定义)</td>
            <td>&lt;table width=&quot;200&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt; &lt;tr align=&quot;center&quot;&gt; &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;细&lt;/td&gt; &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;表&lt;/td&gt; &lt;/tr&gt; &lt;tr align=&quot;center&quot;&gt; &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;线&lt;/td&gt; &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td style="border-right: rgb(0,0,0) 1px dotted; border-top: rgb(0,0,0) 1px dotted; border-left: rgb(0,0,0) 1px dotted; border-bottom: rgb(0,0,0) 1px dotted">细</td>
                        <td style="border-right: rgb(0,0,0) 1px dotted; border-top: rgb(0,0,0) 1px dotted; border-bottom: rgb(0,0,0) 1px dotted">表</td>
                    </tr>
                    <tr align="center">
                        <td style="border-right: rgb(0,0,0) 1px dotted; border-left: rgb(0,0,0) 1px dotted; border-bottom: rgb(0,0,0) 1px dotted">线</td>
                        <td style="border-right: rgb(0,0,0) 1px dotted; border-bottom: rgb(0,0,0) 1px dotted">格</td>
                    </tr>
                </tbody>
            </table>
            再进一步，把边框变成虚线，同样是CSS的神奇作用。</td>
            <td>&lt;table width=&quot;200&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt; &lt;tr align=&quot;center&quot;&gt; &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;细&lt;/td&gt; &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;表&lt;/td&gt; &lt;/tr&gt; &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;线&lt;/td&gt; &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table class="FCK__ShowTableBorders" cellspacing="2" cellpadding="0" width="200" border="0">
                <tbody>
                    <tr>
                        <td>
                        <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"> </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td>
                        <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"> </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"> </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td>
                        <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff"> </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。</td>
            <td>&lt;table width=&quot;200&quot; border=&quot;0&quot; cellspacing=&quot;2&quot; cellpadding=&quot;0&quot;&gt; &lt;tr&gt; &lt;td&gt; &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td&gt; &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td&gt; &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" bordercolordark="#ffffff" cellpadding="0" width="200" bordercolorlight="#ffffff" border="1">
                <tbody>
                    <tr align="center">
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">立</td>
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">表</td>
                    </tr>
                    <tr align="center">
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">体</td>
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">格</td>
                    </tr>
                </tbody>
            </table>
            立体感的表格<br>
            (简单的亮暗边框设置，注意只有IE支持这种效果)</td>
            <td>&lt;table border=&quot;1&quot; bordercolorlight=&quot;#ffffff&quot; bordercolordark=&quot;#ffffff&quot; width=&quot;200&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt; &lt;tr align=&quot;center&quot;&gt; &lt;td bgcolor=&quot;#B7B7B7&quot; bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;立&lt;/td&gt; &lt;td bgcolor=&quot;#B7B7B7&quot; bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;表&lt;/td&gt; &lt;/tr&gt; &lt;tr align=&quot;center&quot;&gt; &lt;td bgcolor=&quot;#B7B7B7&quot; bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;体&lt;/td&gt; &lt;td bgcolor=&quot;#B7B7B7&quot; bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr>
                        <td><fieldset style="width: 200px" align="center"><legend>无名表格 </legend>
                        <p align="right"> </p>
                        </fieldset></td>
                    </tr>
                </tbody>
            </table>
            给表格加上一个表头<br>
            (应用&lt;fieldset&gt;和&lt;/legend&gt;标签)</td>
            <td>&lt;table width=&quot;200&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;fieldset style=&quot;width:200&quot; align=&quot;center&quot;&gt; &lt;legend&gt; 无名表格 &lt;/legend&gt; &lt;p align=&quot;right&quot;&gt; &lt;/fieldset&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr>
                        <td><fieldset style="width: 200px; color: #b7b7b7; border-top-style: groove; border-right-style: groove; border-left-style: groove; border-bottom-style: groove" align="center"><legend style="border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; color: blue; border-bottom: #000000 1px solid">表中表效果Ⅰ</legend><br>
                        </fieldset></td>
                    </tr>
                </tbody>
            </table>
            给表头再加个框<br>
            (用CSS为&lt;legnd&gt;定义一个边框)</td>
            <td>&lt;table width=&quot;200&quot;&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt; &lt;tr&gt; &lt;td&gt; &lt;fieldset style=&quot;width: 200; color: #B7B7B7; border-style: groove&quot; align=&quot;center&quot;&gt; &lt;legend style=&quot;color: blue; border: 1 solid #000000&quot;&gt; 表中表效果Ⅰ&lt;/legend&gt; &lt;br&gt; &lt;/fieldset&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr valign="top">
            <td>
            <table class="FCK__ShowTableBorders" width="200">
                <tbody>
                    <tr>
                        <td><fieldset style="width: 200px" align="center"><legend>
                        <table class="FCK__ShowTableBorders" style="border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid" height="20" cellspacing="1" cellpadding="0" width="80">
                            <tbody>
                                <tr>
                                    <td><font color="#0000ff">表中表效果Ⅱ</font></td>
                                </tr>
                            </tbody>
                        </table>
                        </legend><br>
                        </fieldset></td>
                    </tr>
                </tbody>
            </table>
            看起来和上面的一样，可是这个才是真正的表中表哦。<br>
            (在&lt;legnd&gt;中插入一个表格)</td>
            <td>&lt;table width=&quot;200&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;fieldset style=&quot;width:200&quot; align=&quot;center&quot;&gt; &lt;legend&gt; &lt;table style=&quot;border: 1 solid #000000&quot; width=&quot;80&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; height=&quot;20&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;font color=blue&gt;表中表效果Ⅱ&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/legend&gt;&lt;br&gt; &lt;/fieldset&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</td>
        </tr>
        <tr>
            <td colspan="2"><hr color="#000000" size="1">
            　　这一节要靠你自己去发现了，因为这样学到的东西才是真正属于自己的（我的一个偷懒的借口）。 我已经在每个表格的下面写出了重点，并在右边给出它的源代码，你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格，有兴趣也研究研究吧 ^o^</td>
        </tr>
    </tbody>
</table>
</body>
</html>

=============================================================================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" />
<title>坏狼安全网-漂亮CSS Tables</title>
</head>
<style type="text/css">
/* CSS Document */

body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}

a {
color: #c75f3e;
}

#mytable {
width: 700px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA  no-repeat;
}
/*power by www.winshell.cn*/
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
/*power by www.winshell.cn*/

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
<body>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple

PowerMac G5 series">
<caption> </caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">电话</th>
<th scope="col">居住地点</th>
</tr>
<tr>
<td class="row">badwolf</td>
<td class="row">100</td>
<td class="row">010-110</td>
<td class="row">中国北京</td>
</tr>
<tr>
<td class="row">badwolf</td>
<td class="row">100</td>
<td class="row">010-110</td>
<td class="row">中国北京</td>
</tr>
<tr>
<td class="row">badwolf</td>
<td class="row">100</td>
<td class="row">010-110</td>
<td class="row">中国北京</td>
</tr>
<tr>
<td class="row">badwolf</td>
<td class="row">100</td>
<td class="row">010-110</td>
<td class="row">中国北京</td>
</tr>
</table>

</body>
</html>
分享到：
| 酷炫层展示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    有关表格边框的css语法整理

    有关表格边框的css语法整理 ...　具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。

    CSS设置网页table边框样式.pdf

    .

    让Table的TD有边框而Table右左没有边框的CSS样式

    比如这样一个CSS 复制代码代码如下: .td3{ font-size: 14px; color: #FFFFFF; background-color: #000000; BORDER-RIGHT: #f6f6f6 1px solid; //显示右边框为1px，如果不想显示就为0px BORDER-TOP: #f9f9f9 0px ...

    数据可视化大屏的css背景+边框+demo.rar

    7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css，非常酷炫，开箱即用，做大数据的可以使用哦

    用CSS样式描述表格Table边框

    style type=”text/css”&gt; TABLE { background: blue; border-collapse: separate; border-spacing: 10pt; border-top: 15px solid red; border-left: 15px solid red; border-right: 5px dashed black; border-...

    CSS样式简单实现Table没有外边框只有内边框

    Table默认是有外边框，有内边框的，那么如何通过css样式简单实现Table没有外边框，只有内边框呢？下面有个不错的示例，大家可以看看

    CSS控制Table内外边框、颜色、大小示例

    在默认的情况下，我们的CSS将Table的边框清除掉了，是没有的，看到的效果是这样的。 无边框Table 为了给，表格加一个边框，我在CSS里面写了这样一句： .table{border:solid 1px #add9c0;} 哎，看来是我太天真了，...

    使用HTML开发商业网站-CSS控制表格边框课件.pptx

    除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。 本节将从边框、边距和宽高三个方面，详细讲解CSS控制表格样式的具体方法。 CSS控制...

    html设置虚线边框的方法

    border为边框属性，如果要实现对象边框效果，要设置边框宽度、边框颜色、边框样式（实线还是虚线） border:1px dashed #F00 这个就是设置边框样式宽度为1px，虚线，虚线为红色。 4、实例描述 我们对以上几个标签设置...

    表格边框以虚线显示的css样式

    .table5{text-align:center; border:1px solid #cccccc; border-radius :3px; background-color:#FFFFFF; width:650px;} .table5 td{border-bottom:1px dashed #cccccc;} .table5 .last td{border-bottom:0;} &lt;/...

    css+table 1px边框单元格

    用css不用以前比较传统的用表格背景+单元格背景实现的效果

    css控制表格细边框样式

    复制代码代码如下: table{border-collapse:collapse;} td{background:#F2F2F2;border:solid 1px #CCCCCC;width:100px;height:22px;}

    css 细线表格 css制作table细线表格常用属性

    Css制作table细线表格 1、介绍了一个不常用属性：border-collapse:collapse; 2、使用了一个属性缩写技巧：border:style color;border-width:上 右 下 左; &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ...

    给表格设置不重叠的边框(单线边框)的2种方法

    下面我给大家介绍两种设置单线边框的css样式： 第一种： 复制代码代码如下: table{ border-collapse:collapse; } table tr{ border:1px solid red; } 第二种： 复制代码代码如下: table tr td{ border-top:1px ...

    《CSS全程指南》随书光盘

    6.3 CSS控制表格边框 156 6.4 制作圆角框 157 6.5 小结 159 第7章 表单样式设计 160 7.1 表单样式设计 161 7.1.1 表单透明化 161 7.1.2 增加表单中的空隙 162 7.2 表单元素样式设计 163 7.2.1 文本框样式 163 7.2.2 ...

    CSS网站布局实录 （第二版）PDF版

    具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉...

Magicbox
Global site tag (gtag.js) - Google Analytics