標題標題  顯示論壇會員列表名單  搜索論壇搜索  HelpHelp
  注冊注冊  登入登入
ASP教學區
 DoReMe : ASP教學區
主題 話題: 第六章 中級HTML 回復發表新主題
作者
貼子內容 << Prev Topic下一個主題 >>
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:03下午 | IP記錄 引用 osste

建立文本區

以前我們討論的窗體元素中,用戶不能輸入超過一行的文本,<TEXTAREA>標識符可以建立一個文本區,在這裡你 可提供給用戶更大的空間來自由地輸入文本(見圖6.10)。當你想讓用戶輸入一段文字的時候就使用這個標識符。看下面的例子:

<HTML>

<HEAD>

<TITLE> Text Area </TITLE>

</HEAD>

<BODY >

<FORM ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

<BR> Please enter your comments below:

<BR> <TEXTAREA NAME=「comments」 COLS=40 ROWS=10></TEXTAREA>

</FORM>

</BODY>

</HTML>

 

圖6.10 文本區

你應當立即注意到,在此例中,沒有使用<INPUT>標識符來建立文本區,你使用<TEXTAREA> 標識符來建立文本區,這個標識符與其它窗體元素一樣,必須在<FORM>標識符中出現。

注意

一些瀏覽器允許你使用下面的語句:

<INPUT TYPE=TextArea COLS=40 ROWS=10>

不要這樣做,在<INPUT>標識符的屬性中建立文本區是沒什麼好處的。如果你想讓你的網頁與瀏覽器有最大程度的兼 容性,就使用<TEXTAREA>標識符,不要用TextArea屬性。

使用COLS和ROWS屬性你可以指定文本區的寬度和高度,COLS屬性以列來指定文本區的寬度,ROWS屬性以行來指定文本區 的高度。注意這兩個屬性都是以字符平均寬度來度量的,因為文本區不使用固定字體,因此你在一個50列的文本區內不能剛好輸入50 個字符。

你不能給COLS和ROWS屬性指定百分數值,這是很不方便的,因為這使得網頁在具有不同分辨率的顯示器上看起來不一樣,這也是 HTML的一個不足。

而且,文本區沒有MAXLENGTH屬性。沒有辦法阻止某些用戶在文本區內輸入大量的文字,對此你一點辦法也沒有。

注意,<TEXTAREA>標識符是一個容器標識符,如果你想在第一次讀入網頁時,在文本區顯示出文字,那就要將文 字包含在<TEXTAREA>標識符內。如下所示:

<HTML>

<HEAD>

<TITLE> Text Area </TITLE>

</HEAD>

<BODY >

<FORM ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

<BR> Please enter your comments below:

<BR> <TEXTAREA NAME=「comments」 COLS=40 ROWS=10>

I am the default text!

</TEXTAREA>

</FORM>

</BODY>

</HTML>

當這個HTML文件被網絡瀏覽器解釋時,文字I am the default text!將在文本區內顯示。注意你只能在文本區內輸入文字(包括第五章中討論的特殊字符──見「加入特殊字符」一節)。任何在 <TEXTAREA>中出現的HTML標識符都將被忽略。

HTML規範中沒有定義文本區內的文字怎樣換行,當你在Internet Explorer中在文本區中輸入一行文字到達右邊界時,文本就會自動換到下一行;而使用Netscape Navigator時,文字會向右滾動。

如果你想在Netscape Navigator中控制文本區內的文字怎樣換到新的一行,就要使用Netscape特有的屬性WRAP。這個屬性可接受三個值 :OFF、PHYSICAL和VIRTUAL,缺省值是OFF,即文本不會換到新的一行。另一方面,當WRAP=PHYSICA L時,文本會自動換到下一行。當文本區的內容被提交時,回車鍵會被添加到文本換行的地方。如果你想讓文本區的文字自動換行,但又 不想在提交內容時加入附加的回車鍵,就可以使用WRAP=VIRTUAL。

當我建立文本區時,我幾乎總是使用WRAP=VIRTUAL屬性。當文本區內的文字不自動換行,將會造成用戶輸入信息的混亂,通 過使用這個屬性,我可以確保不管在Microsoft還是Netscape的瀏覽器上文本區的文字都會自動換行,而且我也不想在 解釋文本區的內容時處理多餘的回車鍵,因此使用WRAP=VIRTUAL可做到這一點。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:04下午 | IP記錄 引用 osste

建立隱藏區

使用隱藏區,你可以在永遠不在屏幕上顯示的窗體中加入一些信息。當然,這些信息在窗體提交時也會被包含。

隱藏區對Active Server Pages程序員來說特別有用,你可能會經常使用它們來在網頁之間傳遞隱藏信息。當然只有當你學習了怎樣使用Active Server Pages之後,你才能體會到使用隱藏區的好處。

你可以使用隱藏區來建立不依賴於Cookies的變量,這樣做既有優點也有缺點,要瞭解更多信息,可參閱第16章的「不使用Co okies來保留狀態」一節中的「使用Active Server Pages Session」。

下面的例子在窗體中建立了一個隱藏區:

<HTML>

<HEAD>

<TITLE> Hidden Field </TITLE>

</HEAD>

<BODY >

<FORM ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

<INPUT NAME=「secret」 TYPE=HIDDEN VALUE=「You cannot see me!」>

<INPUT TYPE=SUBMIT VALUE=「Submit Me!」>

</FORM>

</BODY>

</HTML>

當這個HTML文件在網絡瀏覽器上顯示時,你只能在屏幕上看見一個Submit按鈕,名為secret的隱藏區並未顯示出來。然 而當窗體按鈕被按下時,值You cannot see me!被作為窗體內容的一部分發送了。

警告

你不要在隱藏區內放置你私人的信息,網頁瀏覽者可使用瀏覽器的View Source命令看到隱藏區的東西。隱藏區這是隱藏起來不可見,但它們並不能躲過聰明用戶的眼睛。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:04下午 | IP記錄 引用 osste

建立文件上載按鈕

假設你想建立一個讓人們做賣房廣告的網點,如果人們能上載他們房子的照片,那將是非常有用的;或者你想建立一個收納短故事的網點 ,那也要讓人們能上載他們的故事──例如Microsoft Word格式的文件。

理論上,你可以使用<INPUT>標識符的TYPE=FILE屬性來實現這一點,使用這個屬性,你可以在窗體上建立 一個文件上載按鈕(見圖6.11)。當你網點的用戶點擊這個按鈕時,他們可以選擇一個本地硬盤上的文件進行上載。下面的例子顯示 了怎樣去做:

<HTML>

<HEAD>

<TITLE> File Upload </TITLE>

</HEAD>

<BODY >

<FORM ENCTYPE=「multipart/form-data」

ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

Please choose a picture to upload:

<BR> <INPUT NAME=「picture」 TYPE=FILE ACCEPT=「image/*」>

<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>

</FORM>

</BODY>

</HTML>

當這個HTML文件在Netscape Navigator(版本3.0或更高)上顯示時,一個普通的文本框顯示在一個Browse按鈕旁,用戶可以直接在文本框中輸入 文件的名字,或使用Browse按鈕來在文件對話框中選擇一個文件。當這個窗體被提交後,用戶選擇的文件也被提交了。

注意這個例子中<FORM>標識符的ENCTYPE屬性,它指定了提交時窗體信息的編碼方式。通常窗體信息是URL 編碼的(空格被+號代替),然而這種編碼方法對於非文本的信息是很差的,要想高效地傳送一個圖像文件,你應當使用ENCTYPE =「multipart/form-data」。

 

圖6.11 文件上載按鈕

實際的文件上載按鈕用下述標識符創建:

<INPUT NAME=「picture」 TYPE=FILE ACCEPT=「image/*」>

由於TYPE屬性的值是FILE,瀏覽器就會建立一個文件上載按鈕。ACCEPT屬性限制了在文件對話框中出現的文件的類型。在 此例中,文件類型被限制為圖像文件,你可以指定MIME類型中的任意一個或幾個作為ACCEPT屬性的值。

 

 

注意

MIME用於多用途Internet mail擴展。MIME最初被用來作為指定e_mail附屬文件類型的的方法,瀏覽器使用MIME類型來與特定文件相關聯。

一些MIME類型的例子是用於GIF圖像的image/gif,用於JPEG圖像的image/jpeg,用於Microsof t Excel表格的application/x-msexcel,用於Microsoft Word文檔的application/msword。

要查看你的計算機支持的MIME類型,可以使用Windows Explorer中的View/Options/File Types命令。

文件上載按鈕是非常有用的,然而令人遺憾的是,現在的瀏覽器軟件只支持一部分文件上載按鈕,或乾脆就不支持。雖然文件上載按鈕是 HTML 3.2規範的一部分,但這種情況也是存在的。

例如,Netscape Navigator(版本3.0和4.0)忽略ACCEPT屬性,Internet Explorer 3.0更糟糕,它完全拒絕解釋文件上載按鈕,並用一般的文本框代替,而Internet Explorer 4.0能識別文件上載按鈕。在文件上載按鈕被更多的瀏覽器軟件支持前,要小心地使用它們。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:04下午 | IP記錄 引用 osste

使用列表

在很多情況下,你想在你的網頁上顯示一個信息列表。例如,你想顯示一個你喜歡的網點的列表,或者你要顯示一個參觀你網點的10個 理由的列表,或者你非常想列出你喜歡的話語,HTML包含了許多標識符來實現這些目的。

建立無次序列表

最簡單類型的列表是無次序列表。當你需要一個簡單的方法來列出一些項時,就可以使用這種類型的列表(見圖6.12)。例如,你可 以建立一個你喜歡網點的無次序列表,像下面的例子:

<HTML>

<HEAD> <TITLE> Unordered List </TITLE></HEAD>

<BODY>

<UL>

<LI> <A HREF=?/FONT>http://www.hotwired.com?gt; Hotwired </A>

<LI> <A HREF=?/FONT>http://www.byte.com?gt; Byte Magazine </A>

<LI> <A HREF=?/FONT>http://www.microsoft.com?gt; Microsoft </A>

</UL>

</BODY>

</HTML>

 

圖6.12 無次序列表

<UL>標識符包含了列表項,每一個列表項用<LI>標識符來定義,你可以根據需要列出任意多的項。

當這個HTML文件顯示時,在每一個列表項的前面都顯示一個點。缺省狀態下這個點是實心圓點。然而,你也可以使用<UL& gt;的TYPE屬性來改變這個點的形狀。你可以將點的形狀設為圓形、方形或圓圈。下列的文件建立了三個只有一個選項的列表,每 個列表都顯示了一種點:

<HTML>

<HEAD> <TITLE> Unordered List </TITLE></HEAD>

<BODY>

<UL TYPE=「DISC」>

<LI> I have a disc next to me.

</UL>

<UL TYPE=「SQUARE」>

<LI> I have a square next to me.

</UL>

<UL TYPE=「CIRCLE」>

<LI> I have a empty circle next to me.

</UL>

</BODY>

</HTML>

在Netscape Navigator中,每個列表都顯示出一種不同形狀的點,而Internet Explorer(包括版本4.0)忽略這個屬性,所有點顯示出來都是實心圓點。

你可以在一個無次序列表中套入另一個列表,這對於將一個列表分成幾個不同部分是很有用的。例如,你可能需要根據不同的類型將你喜 愛的網點進行分類列表:

<HTML>

<BODY>

<UL>

<LI> Magazine Web Sites

<UL>

<LI> <A HREF=「http://www.byte.com」> BYTE </A>

</UL>

<LI> Company Web Sites

<UL>

<LI> <A HREF=「http://www.microsoft.com」> Microsoft </A>

</UL>

</UL>

</BODY>

</HTML>

如果你在Netscape Navigator上顯示這個HTML文件,你會注意到在每一級分類的前面都有一個不同類型的點。缺省狀態下,最上層的列表顯示 一個圓點,下一級顯示一個圓圈,而再下面的所有級都使用方塊,你可以使用TYPE屬性來改變點的形狀。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:04下午 | IP記錄 引用 osste

建立有序列表

如果你想建立一個有數字標識的列表,可以使用有序列表(見圖6.13)。例如,假設你想列出參觀你網點的理由,使用有序列表可以 很好地達到這一點:

<HTML>

<HEAD> <TITLE> Ordered List </TITLE></HEAD>

<BODY>

<OL>

<LI> This web site uses Active Server Pages.

<LI> This web site uses advanced HTML tags.

<LI> This web site contains no <BLINK> blinking </BLINK> text.

</OL>

</BODY>

</HTML>

 

圖6.13 有序列表

在有序列表中,<OL>標識符包含了所有列表項,每一個列表項都由<LI>標識符定義,你可以加入任意 多的列表項。

缺省情況下,瀏覽器上顯示的列表項以阿拉伯數字編號(即1、2、3),然而你也可以使用<OL>的TYPE屬性改變 這一缺省值。你也可以使用大寫的羅馬數字(Ⅰ、Ⅱ、Ⅲ)進行編號,或是小寫的羅馬數字(I、ii、iii),大寫字母(A、B、 C),小寫字母(a、b、c)。這對於顯示一本書的目錄表是特別有用的,如圖6.14所示:

<HTML>

<HEAD> <TITLE> Ordered List </TITLE></HEAD>

<BODY>

<OL TYPE=I>

<LI> Makeup and Scripting Languages

<OL TYPE=1>

<LI> Basic HTML

<LI> Intermediate HTML

<LI> Advanced HTML

</OL>

</OL>

</BODY>

</HTML>

 

圖6.14 目錄表

注意此例中TYPE屬性是任何設置的,要改變列表項顯示的方式,只要將TYPE屬性設為你要用的數字系統的第一個數字就行了。T YPE屬性可取值1、Ⅰ、i、A或a。

某些情況下,你可能需要在列表的開始或是列表中的某個位置取消某些數字,通過使用<OL>標識符的START屬性, 你可以指定列表中的第一個數字;使用<LI>的VALUE屬性,你可以忽略一定範圍內的數字。下面的例子使用了這兩 個標識符:

<HTML>

<HEAD> <TITLE> Ordered List </TITLE></HEAD>

<BODY>

<OL TYPE=A START=3>

<LI> I display the letter『C』.

<LI VALUE=6> I display the letter』F』.

</OL>

</BODY>

</HTML>

在此例中,因為START屬性被設為3,因此列表從字母C(字母表中的第三個字母)開始。下一個表項將設為字母F,因為它的VA LUE屬性被設為6(字母表中的第六個字母)。使用這兩個屬性,你完全控制了出現在你的列表中的數字。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:05下午 | IP記錄 引用 osste

建立定義列表

假如你想讓你的網頁瀏覽者瞭解一些新的術語及它們的定義,可以使用定義列表來完成這一功能(見圖6.15)。下面是個例子:

<HTML>

<HEAD> <TITLE> Definition List </TITLE></HEAD>

<BODY>

<DL>

<DT> Inveigle

<DD> To entice or lure by artful talk.

<DT> Frisson

<DD> A brief moment of emotional excitement: SHUDDER,THRILL.

</DL>

</BODY>

</HTML>

與其它列表不同,定義列表使用三個標識符:<DL>標識符包含了定義列表,<DT>標識了要被定義的詞 ,而<DD>指明了詞的定義。

使用定義列表你可以很自由地做許多事。例如,你可以用它來顯示一個你喜愛的網站的列表及對這些網點的描述。像下面所示:

<HTML>

<HEAD> <TITLE> Definition List </TITLE></HEAD>

<BODY>

<DL>

<DT> <A HREF=「http://www.hotwired.com」> Hotwired </A>

<DD> A trendy online news source for information on the wired community.

<DT> <A HREF=「http://www.netscape.com」> Netscape </A>

<DD> One of the most visited sites on the Internet.

</DL>

</BODY>

</HTML>

 

圖6.15 定義列表

在此例中,使用定義列表而不是無序列表,在你顯示的網點間沒有圓點出現。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:05下午 | IP記錄 引用 osste

建立表格

表格的用途即是顯而易見的,有時卻也是不被人注意的。首先,表格最通常的用途是建立一個信息的分類,如果你要將信息按行列來安排 ,就要使用它。例如,你可以用表格來顯示一個城市及它們的區域編碼的列表。你還可以用表格來組織從數據庫中獲取的信息。通常,表 格可以用來將那些大量易混淆的信息組織起來,使之易讀。

表格另一個不被人注意但很有用的用途是規劃網頁。使用表格你可以將網頁劃分成幾個不同部分。例如,使用表格你可以在網頁上建立多 列,每一列都有自己的背景色。如果你想對你的網頁的空間和佈局進行控制的話,就可以使用表格。

建立一個簡單的信息表格

表格可以是非常複雜的,有許多關於表格的標識符,每種標識符又有許多屬性,而且這些屬性的大部分在Microsoft和Nets cape上是不同的。然而,表格也可以是非常簡單的,下面的例子是一個非常簡單的表格(見圖6.16):

<HTML>

<HEAD> <TITLE> Table With Border </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<TR>

<TD> I am a table and I have a border. </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

 

圖6.16 具有邊框的簡單表格

 

當這個HTML文件在網絡瀏覽器上顯示時,句子I am a table and I have a border.顯示在一個具有三維外觀邊框的表格中,這種效果是由三個標識符共同完成的<TABLE>、<T R>和<TD>。

在此例中,BORDER屬性在表格周圍顯示一個邊框,你可以通過為BORDER屬性設置不同的值來改變邊界的寬度。顯然,如果不 使用BORDER屬性,顯示出來的表格就沒有邊界。

<TR>標識符為表格添加一行。在此例中,表格只有一行,當然你可以根據需要為表格添加任意多的行。

<TD>標識符用來包含實際的表格數據。你可以將<TD>看作表格的列標識符,表格可以根據需要設置許 多列。<TD>標識符可以包含任意可在HTML文件主體中出現的標識符。例如,<TD>可以包含圖像、 超鏈接和窗體,甚至它還可以包含其它表格。

建立表格時,一般你應當先建立行,然後在行中建立列。你不能在<TD>中包含<TR>,表格是以這種次 序建立行和列的。

上例中的表格非常簡單,它只有一行和一列。然而它包括了建立一個非常大的信息表格所需的所有標識符。要建立大的表格,只需用&l t;TR>和<TD>標識符不斷地加入更多的行和列就行了。

例如,你要建立一個許多城市及其區域編碼的表格,你可以使用下面的方法實現:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

</TR>

<TR>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

在此例中,<TR>用來建立三個行,每一行對應一個城市(見圖6.17);每一行又用<TD>標識符建 立了兩列,用來存放城市名及其編碼。

 

圖6.17 具有多行和多列的表格

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:05下午 | IP記錄 引用 osste

 

建立表頭及標題

圖6.17.所示表格的目的並不明確,如果一個用戶在網頁上把它顯示出來而沒有任何說明文字,沒有人會知道這個表格是一個城市編 碼的列表。你可以通過為表格加上表頭和標題來使表格變得清楚明瞭。

標題標明了整個表格的作用,你可以使用<CAPTION>標識符來為表格加入標題。下面的例子說明了如何使用這一標 識符:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Area Codes </CAPTION>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

</TR>

<TR>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

現在,當這個表格在瀏覽器上顯示時,標題Area Codes將會顯示在表格的正上方。缺省情況下,標題出現在表格的上方,但是你也可以使用<CAPTION>的AL IGN=「bottom」屬性來使標題出現在表格下方。

注意

Internet Explorer還可為<CAPTION>的ALIGN屬性設置「left」和「right」值。你可能會認為這兩 個值會在表格的右邊或左邊建立一個標題,但它們只是改變標題在表格上方顯示時的對齊方式,即分別使標題在表格上進行左對齊或右對 齊。

這個表格還可以讓它變得更明確一些。現在,表格每一列的目的還不很清楚,例如,一些外來的愚蠢的人可能會認為數字415是一個城 市名稱,而名字S按Francisco是區域編碼,要防止出現這種混亂,你就要為表格加上表頭。

你可以用<TH>標識符來為表格加上表頭。<TH>用起來與<TD>標識符類似,然而,在 這個標識符間出現的文字顯示出來是黑體(見圖6.18)。下面的例子顯示的表格包含了一個表頭:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Area Codes </CAPTION>

<TR>

<TH> City </TH>

<TH> Area Code </TH>

</TR>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

</TR>

<TR>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

圖6.18 具有列表頭的表格

使用<TH>標識符不僅可以為列建立表頭,還可以為行建立表頭,只要把它放置於一行的開頭。實際上,你可以把< ;TH>放置於一個表格中任何一個可放置<TD>的位置,這兩個標識符之間的區別是<TH>使文 字以黑體顯示並將文字顯示在中央,而<TD>在缺省情況下並不這樣。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:05下午 | IP記錄 引用 osste

合併行或列

假設你想把表格的某些域進行分割,例如,你想讓任何一個看你表格的人第一眼就能看出哪些城市及其編碼是屬於東海岸的,而哪些又是 位於西海岸的。

你可以通過將表格分成兩部分來實現這一點,每部分分別起名為East Coast和West Coast。East Coast表頭將包含那些位於東海岸的城市及其編碼,而West Coast表頭則包含位於西海岸的。然而,要為表格中多列做一個表頭,你必須讓這個表頭具有多列的寬度。通過<TH> ;標識符的COLSPAN屬性你可以做到這一點(見圖6.19)。下面的例子說明了如何使用這一屬性:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Area Codes </CAPTION>

<TR>

<TH COLSPAN=2> East Coast </TH>

<TH COLSPAN=2> West Coast </TH>

</TR>

<TR>

<TH> City </TH>

<TH> Area Code </TH>

<TH> City </TH>

<TH> Area Code </TH>

</TR>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> </TD>

<TD> </TD>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

圖6.19 合併列的表格

當這個HTML文件在瀏覽器上顯示時,表頭East Coast佔有表格的前兩列,而West Coast則佔有後兩列。<TD>標識符也可以使用COLSPAN屬性,使用COLSPAN屬性,你可以讓表頭佔有 兩倍或更多被於正常的寬度。

還有一個屬性用於合併行,你可以使用<TH>或<TD>標識符的ROWSPAN屬性來合併兩個或更多的 行,你可以使用這個屬性來為多個行建立標籤,當許多行都用同一個標籤的時候,這是很有用的。

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 29
Posted: 2004/11月/16 1:06下午 | IP記錄 引用 osste

控制表格及其表項的對齊方式

缺省情況下,表格在瀏覽器屏幕上左對齊,你可以使用<TABLE>的ALIGN屬性來指定表格的對齊方式。ALIG N屬性可以取值「left」、「center」和「right」。例如,讓一個表格在屏幕中央顯示可以使用:

<TABLE ALIGN=「CENTER」>

注意

使用<TABLE>的ALIGN屬性要小心,不是所有的瀏覽器都能識別它。如果你要讓表格顯示在屏幕中央,使用&l t;CENTER>標識符來包含表格會更安全些。

你可以使用<TR>的ALIGN屬性來設置表格中每行元素的水平對齊方式,這個屬性也可以取值「left」、「ce nter」和「right」。要設置某一行中所有元素的豎直對齊方式,可以使用<TR>的VALIGN屬性,它可以 取值「top」、「middle」和「botton」(缺省情況下取值「middle」)。

要更好地控制表格中某個表頭或元素的排列方式,可以使用<TH>和<TD>標識符的ALIGN和VAL IGN屬性,這兩個屬性的取值範圍與<TR>相同,然而<TH>的<TD>ALIGN和V ALIGN屬性將會覆蓋任何為整個一行指定的排列方式。

控制表項的空間

當瀏覽器顯示一個表格時,它將每一列的寬度設置為這一列中最長表項的寬度。瀏覽器盡可能地佔用較小的屏幕空間來緊密地排列表格中 的每一項。你可以使用<TABLE>的CELLPADDING和CELLSPACING屬性來改變這一缺省值。

通過使用CELLPADDING屬性,你可以為表格中的每一項安排一個更大的空間,使用CELLSPACING屬性,你可以為表 項之間留出一定的空間。這兩個屬性的值都以象素來指定。下面的例子說明了如何使用這兩個屬性(見圖6.20):

<HTML>

<HEAD> <TITLE> Cell Spacing </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Normal Table </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER=1 CELLSPACING=20>

<CAPTION> Table With Cell Spacing </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER=1 CELLPADDING=20>

<CAPTION> Table With Cell Padding </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

圖6.20 表格空間的安排

Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 

<< 上一頁 頁 of 3 下一頁 >>
  回復發表新主題
顯示可打印的頁面 顯示可打印的頁面

論壇跳轉
不能 張貼新論題在這個討論版
不能 回應論題在這個討論版
不能 刪除你的發言在這個討論版
不能 編輯你的發言在這個討論版
不能 新增投票標題在這個討論版
不能 在這個討論版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.6875 seconds.

 
保養品
保養品, Skin Care
www.elady.tw
Makeups Wholesale
Wholesale Cosmetics SkinCares
lungjyi.com
保養品批發
名牌保養品、保養品批發
www.perfume.com.tw/skincare
Wholesale Perfumes
Fragrances Perfumes Wholesale
lungjyi.net