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"
阅读更多
想对作者说点什么? 我来说一句

table边框设置

2013年08月14日 1KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭