在網頁設計時，如果用到table,除了隱藏邊框的用於實現佈局的table外，往往希望能把邊框顯示出來，而對於顯示出來的邊框，又往往希望是單線的，因爲雙線的顯得笨拙。本文總結了7種常用的實現單線表格的方法，供大家參考。當然，實現的方法很多，如果您有其它方法的話，也歡迎寫出來，供大家一起學習。
1、如果簡單的將table的邊框設置爲1，效果如下，它往往不是我們所喜歡的單線表格：
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<table width=400 cellspacing=0 cellpadding=5 border=1>
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
2、方法一：將table的屬性稍微作點修改，就能得到如下的單線表格：
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<table width=400 cellspacing=0 cellpadding=5 border=1 bordercolordark="#ffffff" bordercolorlight="#cc0000">
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
3、方法二：將table的屬性稍微作點變化，就能得到如下的單線表格：(此方法是通過顏色重疊實現的，應用是要根據table所在頁面的背景色調整)
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<table width=400 cellspacing=1 cellpadding=5 border=0 bgcolor="#cc0000">
<tr bgcolor="#ffffff">
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr bgcolor="#ffffff">
<td colspan=2>
cell3
</td>
</table>
4、方法三：將table的屬性稍微作點變化，就能得到如下的單線表格：(此方法是通過顏色重疊實現的，應用是要根據table所在頁面的背景色調整)
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<table width=400 cellspacing=1 cellpadding=5 border=0 bgcolor="#cc0000">
<tr>
<td bgcolor="#ffffff">
cell1
</td>
<td bgcolor="#ffffff">
cell2
</td>
<td rowspan=2 bgcolor="#ffffff">
cell4
</td>
<tr bgcolor="#ffffff">
<td colspan=2 bgcolor="#ffffff">
cell3
</td>
</table>
5、方法四：將table的屬性稍微作點變化，就能得到如下的單線表格：
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<table width=400 cellspacing=0 cellpadding=5 border=1 style="border-collapse: collapse" bordercolor="#cc0000">
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
6、方法五：將table的屬性稍微作點變化，就能得到如下的單虛線表格：
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<table width=400 cellspacing=0 cellpadding=5 style="border-collapse: collapse; border:1px dotted #cc0000" >
<tr>
<td style="border-collapse: collapse; border:1px dotted #cc0000">
cell1
</td>
<td style="border-collapse: collapse; border:1px dotted #cc0000">
cell2
</td>
<td rowspan=2 style="border-collapse: collapse; border:1px dotted #cc0000">
cell4
</td>
<tr>
<td colspan=2 style="border-collapse: collapse; border:1px dotted #cc0000">
cell3
</td>
</table>
7、結合css實現的單線表格如下：
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<style type="text/css">
<!--
#table7{
border-top: 1px solid #cc0000;
border-left: 1px solid #cc0000;
}
#table7 td{
border-bottom:1px solid #cc0000;
border-right: 1px solid #cc0000;
}
-->
</style>
<table width=400 cellspacing=0 cellpadding=5 id=table7>
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
8、結合css實現的單虛線表格如下：
|
cell1 |
cell2 |
cell4 |
|
cell3 |
||
代碼如下：
<style type="text/css">
<!--
#table8{
border-top: 1px dotted #cc0000;
border-left: 1px dotted #cc0000;
}
#table8 td{
border-bottom:1px dotted #cc0000;
border-right: 1px dotted #cc0000;
}
-->
</style>
<table width=400 cellspacing=0 cellpadding=5 id=table8>
<tr>
<td>
cell1
</td>
<td>
cell2
</td>
<td rowspan=2>
cell4
</td>
<tr>
<td colspan=2>
cell3
</td>
</table>
其實，以上方法也有重複的地方，無非是把css單拿出來，或者放在屬性了罷了。只要經過適當的組合和運用，還能產生其它的方法。這也正是網頁設計帶給我們的樂趣所在，只要能夠將各方面的知識靈活運用，有時候真是會感嘆：只有想不到，沒有做不到。