【表格背景】

程式說明
設定表格的背景樣式,表格的背景就跟網頁背景一樣,可以獨立存在,
所以透過此標籤即可針對表格套用背景圖片。

存放位置
將下列程式存放至 <body> 標籤後 </body> 標籤前。

全部設定
利用BGCOLOR="顏色碼"就行了。底下是指定全部表格背景顏色的方法:
原始碼 範例
<TABLE BORDER=1 BGCOLOR=#FFFFDD>

<TR>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

一列設定
利用BGCOLOR="顏色碼"就行了。底下是指定一列格表格背景顏色的方法:
原始碼 範例
<TABLE BORDER=1>

<TR BGCOLOR=#FFFFDD>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

一欄設定
利用BGCOLOR="顏色碼"就行了。底下是指定一欄格表格背景顏色的方法:
原始碼 範例
<TABLE BORDER=1>

<TR>

<TD BGCOLOR=#FFFFDD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

背景圖案
表格位置設定與上面背景設定相同每一個語法所放置的地方都代表著不同的效果,
除了背景顏色以外,還可以加入背景圖片語法,
BACKGROUND="圖片網址"加在其中一格,便可以指定「表格」的背景顏色:

原始碼
<TABLE BORDER=1 BACKGROUND="圖片網址">

<TR BACKGROUND="圖片網址">

<TD BACKGROUND="圖片網址">
1
</TD>

</TR>

</TABLE>


邊框粗細
如何設定表格邊框粗細?只要利用BORDER="粗細值"就行了。
原始碼 範例
<TABLE BORDER=5>

<TR>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

邊框顏色
如何設定表格顏色?只要利用BORDERCOLOR="顏色碼"就行了。
原始碼 範例
<TABLE BORDER=5 BORDERCOLOR="#0080FF">

<TR>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

立體框架
另外,我們也可以設定表格的陰影、亮面顏色,讓表格看起來更有立體感喔!
只要利用 BORDERCOLORLIGHT="#顏色碼"(亮面設定) BORDERCOLORDARK="顏色碼"(暗面設定)就行了。
原始碼 範例
<TABLE BORDER=5 BORDERCOLORLIGHT="#62B0FF"
BORDERCOLORDARK="#004B97">

<TR>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

內文欄距
我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離。
原始碼 範例
<TABLE BORDER="1" CELLPADDING="5">

<TR>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

格線欄距
我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。
原始碼 範例
<TABLE BORDER="1" CELLSPACING="5">

<TR>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

此標籤可以設定表格的內框線,所謂的內框線就是靠近儲存格的內容線,透過內框線的設定,可以指定儲存格之間框線的呈現效果。
我們可以利用RULES屬性設定表格內框線之間的效果,以下為無框線範例。
原始碼 範例
<TABLE BORDER="1" RULES="none">

<TR>

<TD>
1
</TD>

<TD>
2
</TD>

</TR>

<TR>

<TD>
3
</TD>

<TD>
4
</TD>

</TR>

</TABLE>

1 2
3 4

注意事項
當內框線為border=0時,rules的預設參數為none;而當border設定為1以上值時,
rules的預設參數為all。需注意的是,Netscape並不支援該標籤。
參數表如下:

1. none : 不顯示內框線
2. all : 顯示所有的內邊框
3. groups : 顯示介於列組於欄組的框線
4. cols : 顯示介於直欄的框線
5. rows : 顯示介於行列之間的框線


│課程編撰:不二家│單元編號:H13 篇│版權所有:神羅集團