1. 程式人生 > >邊框上下左右各部位隱藏顯示詳解

邊框上下左右各部位隱藏顯示詳解

1.

隱藏下邊框

程式碼:

<TABLEstyle="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse"borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-BOTTOM: medium none"height=40>隱藏下邊框</TD>

</TR></TBODY></TABLE>

2.

隱藏上邊框

程式碼:

 <TABLEstyle="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse"borderColor=#111111 cellSpacing=0 cellPadding=0 width=250align=center bgColor=#dfffdf border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none"height=40>隱藏上邊框</TD></TR></TBODY></TABLE>


3.

隱藏左邊框

程式碼:

 <TABLEstyle="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse"borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-LEFT: medium none"height=40>隱藏左邊框</TD>

</TR></TBODY></TABLE>


4.

隱藏右邊框

程式碼:

 <TABLEstyle="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px"borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none"height=40>隱藏右邊框</TD>

</TR></TBODY></TABLE>

5.

隱藏左右邊框

程式碼:

 <TABLEstyle="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse;BORDER-RIGHT-WIDTH: 0px" borderColor=#111111 bgColor=#DFFFDFcellSpacing=0 cellPadding=0 width=250 align=centerborder=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none; BORDER-LEFT:medium none" height=40>隱藏左右邊框</TD>

</TR></TBODY></TABLE>

6.

隱藏上下邊框

程式碼:

<TABLEstyle="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px;BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDFcellSpacing=0 cellPadding=0 width=250 align=centerborder=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none; BORDER-BOTTOM:medium none"height=40>隱藏上下邊框</TD>

</TR></TBODY></TABLE>

7.

只顯示上邊框

程式碼:

 <TABLEborderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1 frame=above>
<TBODY>
<TR align=middle>
<TDheight=40>只顯示上邊框</TD>

</TR></TBODY></TABLE>

8.

只顯示下邊框

程式碼:

<TABLE borderColor=#111111bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=centerborder=1 frame=below>
<TBODY>
<TR align=middle>
<TDheight=40>只顯示下邊框</TD>

</TR></TBODY></TABLE>

9.

只顯示左邊框

程式碼:

 <TABLEborderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1 frame=lhs>
<TBODY>
<TR align=middle>
<TDheight=40>只顯示左邊框</TD>

</TR></TBODY></TABLE>

10.

只顯示右邊框

程式碼:

 <TABLEborderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0width=250 align=center border=1 frame=rhs>
<TBODY>
<TR align=middle>
<TDheight=40>只顯示右邊框</TD>

</TR></TBODY></TABLE>

11.

不顯示任何邊框

程式碼:

<TABLE borderColor=#111111cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#DFFFDFborder=1 frame=void>
<TBODY>
<TR align=middle>
<TDheight=40>不顯示任何邊框</TD>

</TR></TBODY></TABLE>

12.

邊框全顯示

程式碼:

<TABLEstyle="BORDER-RIGHT-WIDTH: 0px; BORDER-COLLAPSE: collapse" border=1cellSpacing=0 borderColor=#111111 cellPadding=0 width=250bgColor=#dfffdf align=center>
<TBODY>
<TR align=middle>
<TDheight=40>邊框全顯示</TD></TR></TBODY></TABLE>

附:表格常用屬性

       border:表格的邊框寬度。如border=1,表示表格邊框的粗細為1個畫素(預設值),為0表示沒有邊框。
      cellspacing:表格中各單元格的間距。屬性值為數字。當表格只有一個單元格時,則表示該單元格與表格邊框的距離。
      cellpadding:單元格內容與單元格邊框之間的距離,屬性值是數字。
      width:表格的寬度。屬性值為畫素和百分比兩種。
      height:表格的高度。取值方法同width。
      bgcolor:表格的背景顏色。屬性值為各種顏色程式碼。
      background:表格的背景圖案。屬性值為有效的圖片地址。
      bordercolor:表格邊框的顏色。屬性值為各種顏色程式碼(當border值不為0時設定此值有效)。
      bordercolorlight:亮邊框(表格的左邊和上邊框)顏色。屬性值為各種顏色程式碼(當border值不為0時設定此值有效)。
       bordercolordark:暗邊框(表格的右邊和下邊框)顏色。屬性值為各種顏色程式碼(當border值不為0時設定此值有效)。
      align:表格的對齊方式。屬性值為left(左對齊,預設)、center(居中)以及right(右對齊)。
      colspan:定義合併表格的列數。屬性值是數字。
      rowspan定義合併表格的行數,屬性值是數字。