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"