表 格 標 籤 教 學
事前解說
表格標籤就是TABLE而其基本的結構為
<TABLE>
<TR><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD></TR>
</TABLE>
p.s.若在netscape中TABLE忘了結尾會整面空白看不到東西哦
本教學內容中,用了很多的TABLE語法哦..TABLE是一個很重要..而且很好用的語法 若你看我的原始檔,你可能會看到,我的TR,TD,TH都沒結尾,若用在單層表格沒問題,但 若用在巢狀表格,就會出錯了哦,..這個習慣不好哦..別學偶哦...
<TR><TD><TH>
TR是指行(列),有幾個TR就有幾行,而TD,TH則是欄的意思,每行中若有一個TD一個TH則會有兩欄哦. 因為TD和TH其實是同樣的東西,只是TH會將此格中的文字置中且加粗哦!!
例如:
<TABLE>
<TR> <TH>第一行第一格</TH> <TD>第一行第二格</TD></TR>
<TR> <TD>第二行第一格</TD> <TH>第二行第二格</TH></TR>
</TABLE>
結果:
第一行第一格 第一行第二格
第二行第一格 第二行第二格
耶..怪怪的耶..TH..沒有置中丫...別急,等會,就知道了.
 TABLE標籤中的BORDER,WIDTH,HEGIHT指令
BORDER是指框線而預設為0若要有框線則在後面加個數字就好了.大都是3比較多,像我這份文件的TABLE 就是用3的框線
WIDTH整個TABLE的寬度為多少點最好都在640以內啦.不過依解析度不同而定
HEGIHT整個TABLE的高度,不過較少用,因為打多行點就超過了,所以也沒用,這個指令 我都沒用過
例如:
<TABLE BORDER=7 WIDTH=450 HEGIHT=100>
<TR> <TH>第一行第一格</TH> <TD>第一行第二格</TD></TR>
<TR> <TD>第二行第一格</TD> <TH>第二行第二格</TH></TR>
</TABLE>
結果:
第一行第一格 第一行第二格
第二行第一格 第二行第二格
 TH,TD標籤中的WIDTH,HEGIHT,ALIGN,VALIGN,BGCOLOR指令
WIDTH,HEGIHT
TH和TD標籤中的WIDTH,及HEGIHT都和TABLE中的用法一樣
補充一下WIDTH不只可以用數字,還可以用百分比的,就是佔螢幕的百分比例如WIDTH=90%,但是HEGIHT用百分比可能就不行了哦 在TR,TD中的WIDTH加起來應該不能超出TABLE中的WIDTH...(不說你也該知道的,我也沒試過若超過會怎樣)

ALIGN,VALIGN
ALIGN ( 水平對齊 ) ,VALIGN ( 垂直對齊 ) 而
ALIGN有right(右),CENTER(中),left(左)
VALIGN有top(上),middle(中),bottom(下)
任何標籤中若有ALIGN,VALIGN用法完全相同,所以之後的文章不再多做解釋
用法大概是<TR> <TD ALIGN="CENTER" VALIGN="top"> rrrrrrr</TD></TR>

BGCOLOR
表格中可以每個表格去設定其顏色..我想這應該不難吧....
例如<TR> <TD ALIGN="CENTER" VALIGN="top" BGCOLOR=#ffff00> rrrrrrr</TD></TR>

再談TABLE標籤中的指令
其實TABLE 中也有BGCOLOR這個指令,而且還多個BORDERCOLOR ( 框線顏色 )
但是由於這個指令使用後在IE,與NETSCAPE中的差異有點大,我在這只做說明不做示範
在TABLE中若下了BGCOLOR後整個表格會變成那個顏色,包括框線(指IE而言,而NETSCAPE則只有所有表格背景成那個顏色 而框線為在BODY標籤中所給的底色或底圖)
若有與趣可以自行去試試看,我發現在IE中若BORDER為1然後再去用BGCOLOR和BORDERCOLOR效果不錯

TD.TH中的另一個重要指令ROWSPAN,COLSPAN
在WORD中表格的功能有水平合併和垂直合併,當然HTML中也有丫 ROWSPAN,COLSPAN
ROWSPAN(垂直合併),COLSPAN (水平合併),用法是後面加要合併的格數
簡單說明如下:有個4x4的表格

<TABLE BORDER=3 WIDTH=450>
<TR> <TD>1-1</TD> <TD>1-2</TD> <TD>1-3</TD> <TD>1-4</TD> </TR>
<TR> <TD>2-1</TD> <TD>2-2</TD> <TD>2-3</TD> <TD>2-4</TD> </TR>
<TR> <TD>3-1</TD> <TD>3-2</TD> <TD>3-3</TD> <TD>3-4</TD> </TR>
<TR> <TH>4-1</TH> <TH>4-2</TH> <TH>4-3</TH> <TH>4-4</TH> </TR>
</TABLE>
1-1 1-2 1-3 1-4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4
4-1 4-2 4-3 4-4

<TABLE BORDER=3 WIDTH=450>
<TR> <TD COLSPAN=3>1-1</TD> <TD>1-4</TD> </TR>
<TR> <TD>2-1</TD> <TD ROWSPAN=3>2-2</TD> <TD>2-3</TD> <TD>2-4</TD> </TR>
<TR> <TD>3-2</TD> <TD>3-3</TD> <TD>3-4</TD> </TR>
<TR> <TH>4-2</TH> <TH>4-3</TH> <TH>4-4</TH> </TR>
</TABLE>
1-1 1-4
2-1 2-2 2-3 2-4
3-1 3-3 3-4
4-1 4-3 4-4

來解釋上面這堆東西吧,其實很簡單

我們在1-1那下了水平合併3個表格,則1-1,1-2,1-3合併為一格,則第一列只剩1-1,和1-4兩格,所以只有兩個 TD而以

我們在2-2那下了垂直合併3個表格,則2-2,3-2,4-2合併為一格,則第二列還是有4個TD,但三,四列只剩3個TD或TH, 因為三,四列的第二欄被合併到第二列去了

這樣應該了解了吧.....

TABLE的好兄弟HR
HR就是畫出一條水平線,而HR也是少數不用結尾的語法之一
而HR中包含了WIDTH,和ALIGN這兩個用法,應該很熟了
而HR中有個SIZE也就是水平線的寬度SIZE = 一個數字 
HR還有個NOSHADE ( 無陰影的指令,而不用加任何東西,只要打NOSHADE就可以了 )
<HR WIDTH=450 SIZE=3 ALIGN="CENTER">

<HR WIDTH=450 SIZE=3 ALIGN="CENTER" NOSHADE>



本章範例
<HTML>
<HEAD>
<TITLE>表格標籤教學 </TITLE>
</HEAD>
<BODY background="../image/bg000.gif">
<CENTER>
<FONT COLOR=#ff00ff> 其實表格也就是那麼簡單啦 </FONT>
<HR WIDTH=450 SIZE=3 ALIGN="CENTER">

<TABLE BORDER=3 WIDTH=550>
<TR> <TH COLSPAN=4>功 課 表</TH></TR>

<TR> <TD>星期三</TD> <TD>星期二</TD> <TD>星期一</TD> <TD> </TD> </TR>

<TR> <TD COLSPAN=2 ROWSPAN=2 BGCOLOR=#DD964B ALIGN="CENTER">英文</TD> <TD>週會</TD> <TD>第一節</TD> </TR>

<TR> <TD>班會</TD> <TD>第二節</TD> </TR>

<TR> <TD>民法</TD> <TD>憲法</TD> <TD ROWSPAN=2 BGCOLOR=#4BC8E1 ALIGN="CENTER">空堂</TD> <TD>第三節</TD> </TR>

<TR> <TD>數學</TD> <TD>會計</TD><TD>第四節</TD> </TR>
</TABLE>

這個範例很複雜,但要慢慢看完,若了解TABLE對你來說就沒問題了
</CENTER>
</BODY>
</HTML>

範例效果

作者:  醒吾技術學院  國貿系  陳義元  E-mail
完成日期:1999年1月28日

[ 上一頁 | 回主頁 | 下一頁 ]