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>