事前解說 |
表格標籤就是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> 結果:
|
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
BGCOLOR |
再談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>
<TABLE BORDER=3 WIDTH=450>
來解釋上面這堆東西吧,其實很簡單 我們在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> <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對你來說就沒問題了 |
作者:
醒吾技術學院
國貿系
陳義元
E-mail 完成日期:1999年1月28日 |