table的边框线设置

最新推荐文章于 2024-09-30 09:30:16 发布
最新推荐文章于 2024-09-30 09:30:16 发布
阅读量9.6k 收藏
点赞数
文章标签： table border css class java 扩展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/janwei_luo/article/details/5623243
版权
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>  
janwei_luo
关注
layui表格边框_layui怎么固定表格的表头
weixin_39618121的博客
02-06 4070
layui固定表格表头的方法：首先找到layui中的table.js文件；然后在变量table中加入fiexdRowHeight属性；最后添加代码为“if(Object.prototype.toString.call(...))”即可。推荐：《layUI教程》实现效果:表头和底部分页固定，鼠标滚动只会滚顶body中数据。效果如下：1、找到layui中的table.js文件，在变量table中加入属...
html table的边框线怎么变圆角_CSS偶有所得 - table 边框加圆角踩坑
weixin_39612720的博客
02-06 985
1.发现问题看到代码里，关于表格，大家不是很喜欢用原生的table，基本都是div来做。究其原因，大概是table的样式有时候难把控，不像直接操作div那么方便。比如：我们想做一个表格，然后希望这个表格带有边框，且最外层的边框是圆角的。2. 实践采坑ing2.1 - 【踩坑】 这是什么鬼，有空隙????css 代码如下:table {border: 1px solid #d8d8d8;border-ra...
table边框线属性
12-12
表格内外边框线的属性 特备针对表格嵌套表格的时候修改样式比较有用
layui动态表格出现 横竖间隔线
最新发布
f897907070的博客
09-30 514
在用上面的例子中 skin line 是出现行边框风格。用skin:"row" 出现的竖着的边框风格。但是我想实现的有横竖的间隔线，看文档也没有说明。试了下 skin:"line|row" 就出现了，横竖都有的边框线。
table 边框线设置
a392266126的博客
12-05 1919
table{ border-collapse:collapse;border:none; } td{ border:solid #000 1px; }
table边框设置
weixin_33973609的博客
01-19 561
http://www.cnblogs.com/thingk/archive/2013/03/11/2954613.html 一、表格的常用属性基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding（表格内元素的间隔，即tr与tr之间的间隔）、bordercolorlight（...
table添加实线的边框线
weixin_42588672的博客
01-06 2545
可以使用 HTML 中的 style 属性来添加实线边框线。例如： <table style="border: 1px solid black"> <!-- 表格内容 --> </table> 这样就可以在表格中添加一条粗细为 1 像素、颜色为黑色的实线边框线了。 你也可以使用其他的样式属性来调整边框的样式，例如 border-color 属性来调整边框的...
table边框
技术研究中心
12-19 733
通过灵活运用CSS属性，我们能够创造出各式各样的表格边框效果，提升用户对数据的感知和理解。希望通过这篇文章，你对Table边框的设计有了更深入的了解！在网页设计中，表格（Table）是一个常见且功能强大的元素，而表格的边框样式则是设计中不可忽视的一环。本文将深入探讨Table边框的各种细节，为你揭示表格设计的奥秘。表格是展示数据和信息的重要工具，而其边框样式直接影响页面的整体美观和用户体验。通过更改颜色、样式和宽度等属性，我们可以赋予Table边框更多的设计可能性。属性设置了边框的样式，
table嵌套table边框样式
02-21
在网页设计中，表格（Table）是用于组织数据的重要元素，而当表格嵌套时，如何设置合适的边框样式就显得尤为重要。`table嵌套table的边框样式`是一个常见的需求，尤其在处理复杂的数据展示时。本篇将详细介绍如何...
jsp里table边框线_JSP好看表格边框
weixin_39541869的博客
12-20 3426
好文网为大家准备了关于JSP好看表格边框范文,好文网里面收集了五十多篇关于好JSP好看表格边框好文,希望可以帮助大家。更多关于JSP好看表格边框内容请关注好文网篇一：使用JSP做了一个简单的登录框架使用JSP做了一个简单的登录框好文网为大家准备了关于JSP表格边框颜色的文章,好文网里面收集了五十多篇关于好JSP表格边框颜色好文,希望可以帮助大家。更多关于JSP表格边框颜色内容请关注好文网。ctrl...
Table显示你要显示的边框代码
12-14
6. **bordercolorlight** 和 **bordercolordark**: 分别设置表格边框的亮色和暗色，多用于旧版浏览器的双色边框效果。 7. **bgcolor**: 设置整个表格的背景色。 8. **background**: 设置表格的背景图像。 9. **...
一个属性border-collapse解决Table的边框问题
09-25
在网页设计中，表格（Table）是构建和组织内容的一种常用元素，但在过去，带边框的表格设计却经常让网页开发者感到头疼。原因在于，如果要创建一个看起来整洁美观的表格，需要花费大量的时间和精力去调整边框，以...
table如何设置边框
故里的博客
06-23 9403
修改内容： 1.去掉table的默认边框； 2.设置其他颜色边框并合并中间表格的边框。 html: <table> <tr> <td class='year'>年份</td> <td class="common">应计工资</td> <td class="common">实得工资</td> <
正确给table加边框线的三种方法
热门推荐
web_pei的博客
01-16 8万+
第一种：html中通过table标签的border属性添加。 &lt;table id="tab01" border="1px solid #ccc" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt; 第二种：通过css控制（推荐） 1.#tab02,#tab02 tr th,#tab02 tr td{ border: 1
table边框改为细线
.NET 人工智能实践
07-23 1621
table边框改为细线
html table边框线颜色
10-07
HTML table的边框线颜色可以通过CSS样式来设置。根据引用中提供的代码，可以使用以下CSS代码将表格的边框颜色设置为表格的背景颜色： ```CSS table { background: #DCDFE6; border: none; } ``` 这样设置后，表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值