table的边框线设置

2010 - 03 - 03

table的边框线设置

文章分类:Web前端
Java代码 复制代码
  1. <table class="t FCK__ShowTableBorders" cellspacing="0" cellpadding="8" width="600" border="0">   
  2.     <tbody>   
  3.         <tr>   
  4.             <td width="220">   
  5.             <table cellspacing="0" cellpadding="0" rules="cols" width="200" border="1">   
  6.                 <tbody>   
  7.                     <tr align="center">   
  8.                         <td>第</td>   
  9.                         <td>一</td>   
  10.                         <td>行</td>   
  11.                     </tr>   
  12.                     <tr align="center">   
  13.                         <td>第</td>   
  14.                         <td>二</td>   
  15.                         <td>行</td>   
  16.                     </tr>   
  17.                     <tr align="center">   
  18.                         <td>第</td>   
  19.                         <td>三</td>   
  20.                         <td>行</td>   
  21.                     </tr>   
  22.                 </tbody>   
  23.             </table>   
  24.             </td>   
  25.             <td width="380">这个表格去掉了单元格之间的纵向分隔线</td>   
  26.         </tr>   
  27.         <tr>   
  28.             <td><br>   
  29.             <table cellspacing="0" cellpadding="0" rules="rows" width="200" border="1">   
  30.                 <tbody>   
  31.                     <tr align="center">   
  32.                         <td>第</td>   
  33.                         <td>第</td>   
  34.                         <td>第</td>   
  35.                     </tr>   
  36.                     <tr align="center">   
  37.                         <td>一</td>   
  38.                         <td>二</td>   
  39.                         <td>三</td>   
  40.                     </tr>   
  41.                     <tr align="center">   
  42.                         <td>列</td>   
  43.                         <td>列</td>   
  44.                         <td>列</td>   
  45.                     </tr>   
  46.                 </tbody>   
  47.             </table>   
  48.             </td>   
  49.             <td>这个表格去掉了单元格之间的横向分隔线</td>   
  50.         </tr>   
  51.         <tr>   
  52.             <td>   
  53.             <table cellspacing="0" cellpadding="0" rules="none" width="200" border="1">   
  54.                 <tbody>   
  55.                     <tr align="center">   
  56.                         <td>横</td>   
  57.                         <td> </td>   
  58.                         <td>线</td>   
  59.                     </tr>   
  60.                     <tr align="center">   
  61.                         <td>竖</td>   
  62.                         <td> </td>   
  63.                         <td>线</td>   
  64.                     </tr>   
  65.                     <tr align="center">   
  66.                         <td>都</td>   
  67.                         <td>没</td>   
  68.                         <td>了</td>   
  69.                     </tr>   
  70.                 </tbody>   
  71.             </table>   
  72.             </td>   
  73.             <td>这个表格去掉了单元格之间的纵向分隔线和横向分隔线</td>   
  74.         </tr>   
  75.         <tr>   
  76.             <td colspan="2"><hr color="#000000" size="1">   
  77.               其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到&lt;TABLE&gt;标签中都有rules。 它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列;而当rules=none时,纵向分隔线和横向分隔线将全部隐藏。</td>   
  78.         </tr>   
  79.     </tbody>   
  80. </table>   
  81. <br>   
  82. <br>   
  83. <br>   
  84. <table class="FCK__ShowTableBorders" height="30" cellspacing="0" cellpadding="0" width="600" border="0">   
  85.     <tbody>   
  86.         <tr>   
  87.             <td><strong>二、表格边框的隐藏</strong></td>   
  88.         </tr>   
  89.     </tbody>   
  90. </table>   
  91. <table class="t FCK__ShowTableBorders" cellspacing="0" cellpadding="8" width="600" border="0">   
  92.     <tbody>   
  93.         <tr>   
  94.             <td>   
  95.             <table cellspacing="0" cellpadding="0" width="200" border="1">   
  96.                 <tbody>   
  97.                     <tr align="center">   
  98.                         <td>普</td>   
  99.                         <td>表</td>   
  100.                     </tr>   
  101.                     <tr align="center">   
  102.                         <td>通</td>   
  103.                         <td>格</td>   
  104.                     </tr>   
  105.                 </tbody>   
  106.             </table>   
  107.             </td>   
  108.             <td>这是一普通的表格</td>   
  109.         </tr>   
  110.         <tr>   
  111.             <td><br>   
  112.             <table cellspacing="0" cellpadding="0" width="200" border="1" frame="above">   
  113.                 <tbody>   
  114.                     <tr align="center">   
  115.                         <td>不怕</td>   
  116.                         <td>下雨</td>   
  117.                     </tr>   
  118.                     <tr align="center">   
  119.                         <td> </td>   
  120.                         <td> </td>   
  121.                     </tr>   
  122.                 </tbody>   
  123.             </table>   
  124.             </td>   
  125.             <td>只显示上边框</td>   
  126.         </tr>   
  127.         <tr>   
  128.             <td>   
  129.             <table cellspacing="0" cellpadding="0" width="200" border="1" frame="below">   
  130.                 <tbody>   
  131.                     <tr>   
  132.                         <td> </td>   
  133.                         <td> </td>   
  134.                     </tr>   
  135.                     <tr>   
  136.                         <td align="center">下起雨来</td>   
  137.                         <td align="center">该怎么办</td>   
  138.                     </tr>   
  139.                 </tbody>   
  140.             </table>   
  141.             </td>   
  142.             <td>只显示下边框</td>   
  143.         </tr>   
  144.         <tr>   
  145.             <td><br>   
  146.             <table cellspacing="0" cellpadding="0" width="200" border="1" frame="vsides">   
  147.                 <tbody>   
  148.                     <tr>   
  149.                         <td align="center">上不着天</td>   
  150.                         <td> </td>   
  151.                     </tr>   
  152.                     <tr>   
  153.                         <td> </td>   
  154.                         <td align="center">下不着地</td>   
  155.                     </tr>   
  156.                 </tbody>   
  157.             </table>   
  158.             </td>   
  159.             <td>只显示左、右边框</td>   
  160.         </tr>   
  161.         <tr>   
  162.             <td>   
  163.             <table cellspacing="0" cellpadding="0" width="200" border="1" frame="hsides">   
  164.                 <tbody>   
  165.                     <tr>   
  166.                         <td> </td>   
  167.                         <td align="center">两边走开</td>   
  168.                     </tr>   
  169.                     <tr>   
  170.                         <td align="center">老子姓王</td>   
  171.                         <td> </td>   
  172.                     </tr>   
  173.                 </tbody>   
  174.             </table>   
  175.             </td>   
  176.             <td>只显示上、下边框</td>   
  177.         </tr>   
  178.         <tr>   
  179.             <td><br>   
  180.             <table cellspacing="0" cellpadding="0" width="200" border="1" frame="lhs">   
  181.                 <tbody>   
  182.                     <tr>   
  183.                         <td width="100">左右</td>   
  184.                         <td width="100"> </td>   
  185.                     </tr>   
  186.                     <tr>   
  187.                         <td>为难</td>   
  188.                         <td> </td>   
  189.                     </tr>   
  190.                 </tbody>   
  191.             </table>   
  192.             </td>   
  193.             <td>只显示左边框</td>   
  194.         </tr>   
  195.         <tr>   
  196.             <td>   
  197.             <table cellspacing="0" cellpadding="0" width="200" border="1" frame="rhs">   
  198.                 <tbody>   
  199.                     <tr>   
  200.                         <td width="100"> </td>   
  201.                         <td align="right" width="100">左右</td>   
  202.                     </tr>   
  203.                     <tr>   
  204.                         <td> </td>   
  205.                         <td align="right">为难</td>   
  206.                     </tr>   
  207.                 </tbody>   
  208.             </table>   
  209.             </td>   
  210.             <td>只显示右边框</td>   
  211.         </tr>   
  212.         <tr>   
  213.             <td><br>   
  214.             <table cellspacing="0" cellpadding="0" width="200" border="1" frame="void">   
  215.                 <tbody>   
  216.                     <tr>   
  217.                         <td align="right">光秃秃</td>   
  218.                         <td> </td>   
  219.                     </tr>   
  220.                     <tr>   
  221.                         <td> </td>   
  222.                         <td align="left">全脱了</td>   
  223.                     </tr>   
  224.                 </tbody>   
  225.             </table>   
  226.             </td>   
  227.             <td>不显示任何边框</td>   
  228.         </tr>   
  229.         <tr>   
  230.             <td colspan="2"><hr color="#000000" size="1">   
  231.             表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。<br>   
  232.             只显示上边框 &lt;table frame=above&gt;<br>   
  233.             只显示下边框 &lt;table frame=below&gt; <br>   
  234.             只显示左、右边框 &lt;table frame=vsides&gt;<br>   
  235.             只显示上、下边框 &lt;table frame=hsides&gt;<br>   
  236.             只显示左边框 &lt;table frame=lhs&gt;<br>   
  237.             只显示右边框 &lt;table frame=rhs&gt;<br>   
  238.             不显示任何边框 &lt;table frame=void&gt;</td>   
  239.         </tr>   
  240.     </tbody>   
  241. </table>   
  242. <p> </p>   
  243. <p>   
  244. <table class="FCK__ShowTableBorders" height="30" cellspacing="0" cellpadding="0" width="600" border="0">   
  245.     <tbody>   
  246.         <tr>   
  247.             <td><strong>三、表格边框</strong></td>   
  248.         </tr>   
  249.     </tbody>   
  250. </table>   
  251. <table class="t FCK__ShowTableBorders" cellspacing="0" cellpadding="8" width="600" border="0">   
  252.     <tbody>   
  253.         <tr valign="top">   
  254.             <td>   
  255.             <table cellspacing="0" cellpadding="0" width="200" border="1">   
  256.                 <tbody>   
  257.                     <tr align="center">   
  258.                         <td>普</td>   
  259.                         <td>表</td>   
  260.                     </tr>   
  261.                     <tr align="center">   
  262.                         <td>通</td>   
  263.                         <td>格</td>   
  264.                     </tr>   
  265.                 </tbody>   
  266.             </table>   
  267.             这是一普通的表格</td>   
  268.             <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;&nbsp;&nbsp;  &lt;td&gt;普&lt;/td&gt; &lt;td&gt;表&lt;/td&gt; &lt;/tr&gt; &lt;tr align=&quot;center&quot;&gt;&nbsp;&nbsp;  &lt;td&gt;通&lt;/td&gt; &lt;td&gt;格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&nbsp;&nbsp;</td>   
  269.         </tr>   
  270.         <tr valign="top">   
  271.             <td>   
  272.             <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="200" bgcolor="#000000" border="0">   
  273.                 <tbody>   
  274.                     <tr align="center" bgcolor="#ffffff">   
  275.                         <td bgcolor="#ffffff">细</td>   
  276.                         <td bgcolor="#ffffff">表</td>   
  277.                     </tr>   
  278.                     <tr align="center" bgcolor="#ffffff">   
  279.                         <td bgcolor="#ffffff">线</td>   
  280.                         <td bgcolor="#ffffff">格</td>   
  281.                     </tr>   
  282.                 </tbody>   
  283.             </table>   
  284.             表格加上了漂亮的细线<br>   
  285.             (利用cellspacing1像素间隙和表格与单元格背景的不同)</td>   
  286.             <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;&nbsp;&nbsp;  &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;&nbsp;&nbsp;  &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;&nbsp;&nbsp;</td>   
  287.         </tr>   
  288.         <tr valign="top">   
  289.             <td>   
  290.             <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">   
  291.                 <tbody>   
  292.                     <tr align="center">   
  293.                         <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>   
  294.                         <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>   
  295.                     </tr>   
  296.                     <tr align="center">   
  297.                         <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>   
  298.                         <td style="border-right: rgb(0,0,0) 1px groove; border-bottom: rgb(0,0,0) 1px groove">格</td>   
  299.                     </tr>   
  300.                 </tbody>   
  301.             </table>   
  302.             这和上面那个可不一样,它用的是CSS,效果却一样。<br>   
  303.             (对单元格border的定义)</td>   
  304.             <td>&lt;table width=&quot;200&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt; &lt;tr align=&quot;center&quot;&gt;&nbsp;&nbsp;  &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;&nbsp;&nbsp;  &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;&nbsp;&nbsp;</td>   
  305.         </tr>   
  306.         <tr valign="top">   
  307.             <td>   
  308.             <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">   
  309.                 <tbody>   
  310.                     <tr align="center">   
  311.                         <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>   
  312.                         <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>   
  313.                     </tr>   
  314.                     <tr align="center">   
  315.                         <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>   
  316.                         <td style="border-right: rgb(0,0,0) 1px dotted; border-bottom: rgb(0,0,0) 1px dotted">格</td>   
  317.                     </tr>   
  318.                 </tbody>   
  319.             </table>   
  320.             再进一步,把边框变成虚线,同样是CSS的神奇作用。</td>   
  321.             <td>&lt;table width=&quot;200&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt; &lt;tr align=&quot;center&quot;&gt;&nbsp;&nbsp;  &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;&nbsp;&nbsp;</td>   
  322.         </tr>   
  323.         <tr valign="top">   
  324.             <td>   
  325.             <table class="FCK__ShowTableBorders" cellspacing="2" cellpadding="0" width="200" border="0">   
  326.                 <tbody>   
  327.                     <tr>   
  328.                         <td>   
  329.                         <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">   
  330.                             <tbody>   
  331.                                 <tr>   
  332.                                     <td bgcolor="#ffffff"> </td>   
  333.                                 </tr>   
  334.                             </tbody>   
  335.                         </table>   
  336.                         </td>   
  337.                         <td>   
  338.                         <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">   
  339.                             <tbody>   
  340.                                 <tr>   
  341.                                     <td bgcolor="#ffffff"> </td>   
  342.                                 </tr>   
  343.                             </tbody>   
  344.                         </table>   
  345.                         </td>   
  346.                     </tr>   
  347.                     <tr>   
  348.                         <td>   
  349.                         <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">   
  350.                             <tbody>   
  351.                                 <tr>   
  352.                                     <td bgcolor="#ffffff"> </td>   
  353.                                 </tr>   
  354.                             </tbody>   
  355.                         </table>   
  356.                         </td>   
  357.                         <td>   
  358.                         <table class="FCK__ShowTableBorders" cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">   
  359.                             <tbody>   
  360.                                 <tr>   
  361.                                     <td bgcolor="#ffffff"> </td>   
  362.                                 </tr>   
  363.                             </tbody>   
  364.                         </table>   
  365.                         </td>   
  366.                     </tr>   
  367.                 </tbody>   
  368.             </table>   
  369.             细线表格的扩展应用,奥妙就是在第个单元格中再套入一个表格。</td>   
  370.             <td>&lt;table width=&quot;200&quot; border=&quot;0&quot; cellspacing=&quot;2&quot; cellpadding=&quot;0&quot;&gt; &lt;tr&gt;&nbsp;&nbsp;  &lt;td&gt;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;&nbsp;&nbsp;&nbsp;  &lt;tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt;&nbsp;&nbsp;&nbsp;  &lt;/tr&gt;&nbsp;&nbsp;&nbsp;  &lt;/table&gt; &lt;/td&gt; &lt;td&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;/tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&nbsp;&nbsp;  &lt;td&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;/tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;/table&gt; &lt;/td&gt; &lt;td&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;td bgcolor=&quot;#FFFFFF&quot;&gt; &lt;/td&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;/tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&nbsp;&nbsp;</td>   
  371.         </tr>   
  372.         <tr valign="top">   
  373.             <td>   
  374.             <table cellspacing="0" bordercolordark="#ffffff" cellpadding="0" width="200" bordercolorlight="#ffffff" border="1">   
  375.                 <tbody>   
  376.                     <tr align="center">   
  377.                         <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">立</td>   
  378.                         <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">表</td>   
  379.                     </tr>   
  380.                     <tr align="center">   
  381.                         <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">体</td>   
  382.                         <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">格</td>   
  383.                     </tr>   
  384.                 </tbody>   
  385.             </table>   
  386.             立体感的表格<br>   
  387.             (简单的亮暗边框设置,注意只有IE支持这种效果)</td>   
  388.             <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;&nbsp;&nbsp;  &lt;td bgcolor=&quot;#B7B7B7&quot;&nbsp;&nbsp;  bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;立&lt;/td&gt; &lt;td bgcolor=&quot;#B7B7B7&quot;&nbsp;&nbsp;  bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;表&lt;/td&gt; &lt;/tr&gt; &lt;tr align=&quot;center&quot;&gt;&nbsp;&nbsp;  &lt;td bgcolor=&quot;#B7B7B7&quot;&nbsp;&nbsp;  bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;体&lt;/td&gt; &lt;td bgcolor=&quot;#B7B7B7&quot;&nbsp;&nbsp;  bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&nbsp;&nbsp;</td>   
  389.         </tr>   
  390.         <tr valign="top">   
  391.             <td>   
  392.             <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">   
  393.                 <tbody>   
  394.                     <tr>   
  395.                         <td><fieldset style="width: 200px" align="center"><legend>无名表格 </legend>   
  396.                         <p align="right"> </p>   
  397.                         </fieldset></td>   
  398.                     </tr>   
  399.                 </tbody>   
  400.             </table>   
  401.             给表格加上一个表头<br>   
  402.             (应用&lt;fieldset&gt;和&lt;/legend&gt;标签)</td>   
  403.             <td>&lt;table width=&quot;200&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt; &lt;tr&gt;&nbsp;&nbsp;  &lt;td&gt;&lt;fieldset style=&quot;width:200&quot; align=&quot;center&quot;&gt; &lt;legend&gt; 无名表格 &lt;/legend&gt;&nbsp;&nbsp;  &lt;p align=&quot;right&quot;&gt;&nbsp;&nbsp;  &lt;/fieldset&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&nbsp;&nbsp;</td>   
  404.         </tr>   
  405.         <tr valign="top">   
  406.             <td>   
  407.             <table class="FCK__ShowTableBorders" cellspacing="0" cellpadding="0" width="200">   
  408.                 <tbody>   
  409.                     <tr>   
  410.                         <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>   
  411.                         </fieldset></td>   
  412.                     </tr>   
  413.                 </tbody>   
  414.             </table>   
  415.             给表头再加个框<br>   
  416.             (用CSS为&lt;legnd&gt;定义一个边框)</td>   
  417.             <td>&lt;table width=&quot;200&quot;&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt; &lt;tr&gt;&nbsp;&nbsp;  &lt;td&gt; &lt;fieldset style=&quot;width: 200; color: #B7B7B7; border-style: groove&quot; align=&quot;center&quot;&gt;&nbsp;&nbsp;  &lt;legend style=&quot;color: blue; border: 1 solid #000000&quot;&gt; 表中表效果Ⅰ&lt;/legend&gt;&nbsp;&nbsp;  &lt;br&gt; &lt;/fieldset&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&nbsp;&nbsp;</td>   
  418.         </tr>   
  419.         <tr valign="top">   
  420.             <td>   
  421.             <table class="FCK__ShowTableBorders" width="200">   
  422.                 <tbody>   
  423.                     <tr>   
  424.                         <td><fieldset style="width: 200px" align="center"><legend>   
  425.                         <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">   
  426.                             <tbody>   
  427.                                 <tr>   
  428.                                     <td><font color="#0000ff">表中表效果Ⅱ</font></td>   
  429.                                 </tr>   
  430.                             </tbody>   
  431.                         </table>   
  432.                         </legend><br>   
  433.                         </fieldset></td>   
  434.                     </tr>   
  435.                 </tbody>   
  436.             </table>   
  437.             看起来和上面的一样,可是这个才是真正的表中表哦。<br>   
  438.             (在&lt;legnd&gt;中插入一个表格)</td>   
  439.             <td>&lt;table width=&quot;200&quot;&gt; &lt;tr&gt;&nbsp;&nbsp;  &lt;td&gt;&lt;fieldset style=&quot;width:200&quot; align=&quot;center&quot;&gt; &lt;legend&gt;&nbsp;&nbsp;  &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;&nbsp;&nbsp;  &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;&nbsp;&nbsp;</td>   
  440.         </tr>   
  441.         <tr>   
  442.             <td colspan="2"><hr color="#000000" size="1">   
  443.               这一节要靠你自己去发现了,因为这样学到的东西才是真正属于自己的(我的一个偷懒的借口)。 我已经在每个表格的下面写出了重点,并在右边给出它的源代码,你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格,有兴趣也研究研究吧 ^o^</td>   
  444.         </tr>   
  445.         <tr>   
  446.             <td colspan="2">   
  447.             <p> </p>   
  448.             <hr color="#000000" size="1">   
  449.             <strong>下面来讲讲如何来快速的实现细线表格拉</strong>   
  450.             <p> </p>   
  451.             <p>。。其实很简单啊。。只要在标题那边嵌入一段小小的CSS就可以实现啦。虽然只能实现细线表格。。但是一目了然。嘻嘻</p>   
  452.             </td>   
  453.         </tr>   
  454.         <tr>   
  455.             <td>&lt;style type=&quot;text/css&quot;&gt;<br>   
  456.             .table1{background:#000000;}<br>   
  457.             /* 这边定义了表格的背景,也就是边框的颜色 */<br>   
  458.             .table1 td, .table1 th{background:#FFFFFF} <br>   
  459.             /* 这边定义了表格内的单元格背景是白色啦,就细线就这样出现啦 */<br>   
  460.             &lt;/style&gt;<br>   
  461.             这边你也可以定义背景为图片啦。不一样的图片会产生不一样的边框样式哦</td>   
  462.             <td>   
  463.             <p>&lt;table cellpadding=&quot;3&quot; cellspacing=&quot;1&quot; border=&quot;0&quot; width=&quot;200&quot; height=&quot;50&quot; class=&quot;table1&quot;&gt;<br>   
  464.             &lt;tr&gt;<br>   
  465.             &lt;td&gt;&lt;/td&gt;<br>   
  466.             &lt;td&gt;&lt;/td&gt;<br>   
  467.             &lt;/tr&gt;<br>   
  468.             &lt;tr&gt;<br>   
  469.             &lt;td&gt;&lt;/td&gt;<br>   
  470.             &lt;td&gt;&lt;/td&gt;<br>   
  471.             &lt;/tr&gt;<br>   
  472.             &lt;/table&gt;</p>   
  473.             <p>这边的表格结构是不是很清楚啦。。其中关键的是要设置cellspacing为&quot;1&quot;还有就是定义它的class为&quot;table1&quot;。。关键的俩个千万不能忘了哦,不然效果出不来的哦。。</p>   
  474.             </td>   
  475.         </tr>   
  476.     </tbody>   
  477. </table>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值