table布局中的一些关键点

 

【table布局点1:表格边框】

 border-spacing:0;
 border-collapse:collapse;

　　显示效果为：

加之前效果

加之后效果

【table布局点2:跨列、跨行的单元格】

 1 <html>
 2 
 3 <body>
 4 
 5 <h4>横跨两列的单元格：</h4>
 6 <table border="1">
 7 <tr>
 8   <th>姓名</th>
 9   <th colspan="2">电话</th>
10 </tr>
11 <tr>
12   <td>Bill Gates</td>
13   <td>555 77 854</td>
14   <td>555 77 855</td>
15 </tr>
16 </table>
17 
18 <h4>横跨两行的单元格：</h4>
19 <table border="1">
20 <tr>
21   <th>姓名</th>
22   <td>Bill Gates</td>
23 </tr>
24 <tr>
25   <td rowspan="2">电话</td>
26   <td>555 77 854</td>
27 </tr>
28 <tr>
29   <td>555 77 855</td>
30 </tr>
31 </table>
32 
33 </body>
34 
35 
36 </html>

横跨两列的单元格：

姓名电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格：

姓名 Bill Gates
电话 555 77 854
555 77 855

 

一、
1、显示表格的4个边框：<table border frame=box>
2、只显示上边框: <table border frame=above>
3、只显示下边框: <table border frame=below>
4、只显示上下边框: <table border frame=hsides>
5、只显示左右边框: <table border frame=vsides>
6、只显示左边框： <table border frame=lhs>
7、只显示右边框： <table border frame=rhs>
8、不显示任何边框： <table border frame=void>

二、
1、只显示列与列之间的分隔线：<table rules=cols>
2、只显示行与行之间的分隔线：<table rules=rows>
3、不显示任何分隔线： <table rules=none> (只显示四个边框)
4、显示所有分隔线： <table rules=all>

但是还要提醒的是，nc不支持这些表格属性！

 

posted @ 2012-04-20 19:51  Seaurl  阅读(336)  评论(0)  编辑  收藏  举报