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不支持这些表格属性！
