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


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

控制表格和表項的大小

某些時候你可能想讓表格顯示出來大一些，你可以用<TABLE>的WIDTH屬性來控制表格的寬度，你可以為WID TH屬性提供寬度的絕對值或相對值。

當為WIDTH屬性提供寬度的絕對值時，你用象素來表示。例如，要建立一個寬為100個象素的表格，可以用<TABLE WIDTH＝100>。當然，並不能保證表格顯示出來恰好是你指定的寬度，表項中的內容可能會迫使表格顯示出來比WIDT H屬性指定的值要寬。

另外，你也可以用相對值來指定表格的寬度，例如，如果你想讓表格佔有整個瀏覽器屏幕那麼寬，你可以用<TABLE WIDTH=「100％」>，同樣地，如果你在WIDTH屬性中指定的百分數太小的話，瀏覽器顯示出來的表格就不是那個寬 度。

<HEIGHT>屬性可以用來指定表格的整體高度，同樣這個屬性可取絕對值和相對值。但使用這個屬性時要小心，即使 Microsoft和Netscape的瀏覽器都能正確解釋它，但它並不是HTML 3.2規範中的一部分。

你也可以用<TD>和<TH>標識符的WIDTH和HEIGHT屬性來控制表格中某一表項的大小，你必 須用絕對像素值來指定這些屬性的值。你要知道當你設置這些值時，只不過是在為瀏覽器提供建議，瀏覽器盡量按你的意願去做，但也有 可能不能完全按你指定的方式來顯示一個表格。
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

在表格中加入顏色和圖像

根據HTML 3.2規範，表格不具有任何顏色屬性。然而，值得慶幸的是Netscape和Microsoft都擴展了HTML來讓表格具有自 己的背景色，兩種瀏覽器都能識別<TABLE>標識符的BGCOLOR屬性。

你可以使用顏色名或RGB值來設定BGCOLOR的值，下面的例子說明了這個屬性的用法：

<HTML>

<HEAD> <TITLE> Table Color </TITLE> </HEAD>

<BODY BGCOLOR=「white」>

<CENTER>

<TABLE BGCOLOR=「lightblue」 CELLPADDING=10>

<TR>

<TD> I have a blue background </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

當這個例子中的文字在瀏覽器上顯示時，它處於一個淺藍色的框中，這對於突出主頁上主體文字中某些特定的文本是很有用的。例如，你 可以使用這種方法來突出一個引用、標題或是網頁上一個簡短的註釋。

你也可以為表格中某一行甚至是某一個表項使用BGCOLOR屬性。例如，可以用不同的顏色來區分表格中不同列的數據。

BGCOLOR屬性的一個更令人興奮的用處可能是設置你網頁的整體顏色，如果你將表格的寬度設為屏幕的寬度，你可以建立一個具有 多列的網頁，而每一列都具有不同的顏色。下面的例子建立了一個有兩列不同顏色的網頁：

<HTML>

<HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>

<BODY BGCOLOR=「white」>

<CENTER>

<TABLE WIDTH=「100%」 HEIGHT=「100%」>

<TR>

<TD BGCOLOR=「Olive」 ALIGN=「center」> I have a olive background </TD>

<TD BGCOLOR=「Aqua」 ALIGN=「center」> I have a aqua background </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Netscape和Microsoft的瀏覽器都允許你為表格設定背景圖片（見圖6.21），你可以通過<TABLE&g t;標識符的BACKGROUND屬性來指定一幅圖像：

<HTML>

<HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>

<BODY BGCOLOR=「white」>

<CENTER>

<TABLE WIDTH=「50%」 HEIGHT=「100%」 BACKGROUND=「myimage.gif」>

<TR>

<TD ALIGN=「center」> I have a checkered background </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Netscape Navigator 4.0和Internet Explorer 3.0及4.0還允許你在表格的某一行或某個表項使用BACKGROUND屬性，通過為不同的表項使用不同的背景圖像，你可以建 立一個可視性非常強的網頁。

 

圖6.21 使用背景圖像的表格
Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


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

妏蚚桶跡筳俴詢?鋒?挩

綅蚚桶跡斕褫眕偞?堤準都柲竘佽躂W?挩痑盼\蚚桶跡斕褫眕準都?庰襤挩W?甡祥肮腔髡夔煦傖祥肮腔窒煦﹝狟醱岆?瞰赽ㄩ

<HTML>

<HEAD> <TITLE> Table Page Layout </TITLE> </HEAD>

<BODY BGCOLOR=☆white★>

<TABLE BGCOLOR=☆yellow★WIDTH=☆100%★>

<TR>

<TD ALIGN=CENTER VALIGN=CENTER>

<FONT FACE=ARIAL SIZE=+2> Acme Industrial Products </FONT>

</TD>

</TR>

</TABLE>

<TABLE HEIGHT=?00%?ELLPADDING=20>

<TR>

<TD ALIGN=CENTER VALIGN=CENTER BGCOLOR=blue?gt;

<FORM METHOD=POST ACTION=?somedirectory/mypage.asp?gt;

<INPUT NAME=Home?TYPE=SUBMIT?VALUE=HOME?gt; <P>

<INPUT NAME=Buy?TYPE=SUBMIT?VALUE=BUY?gt; <P>

<INPUT NAME=Help?TYPE=SUBMIT?VALUE=HELP?gt; <P>

</FORM>

</TD>

<TD ALIGN=CENTER VALIGN=CENTER>

<TABLE HEIGHT=?00%?ALIGN=CENTER CELLSPACING=50>

<TR>

<TD>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

At Acme Industrial, you can buy the latest

manufacturing equipment at the lowest prices.

We have a commitment to quality that has been

unserpassed for over 50 years.

Browse our store and make up your own mind!

</TD>

</TR>

<TR VALIGN=bottom?gt;

<TD>

<FONT SIZE= -1> &copy; 1997 by Acme Industrial.

Any questions about this web site? Contact the

<A HREF=mailto: webmaster@acme.com?gt; webmaster </A>

</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

稛?瞰赽妏蚚賸?桶跡ㄗ?D6.22ㄘ﹝珨?蚚黺婓そ躉腔淏奻源鞞尨呧}Acme Industrial Productsㄛ稛?桶跡腔掖劓?伎岆S伎﹝WIDTH棞埜閩O憿100ㄔ★ㄛ垀眕稛?桶跡U湮橩?そ躉腔?僅﹝

菴媼?桶跡掩蚚顈硤謐閤?膘蕾珨?偌漃lㄛ稛?桶跡腔掖劓伎岆芅伎ㄛK衄?Submit偌漃ㄛ褫?％TML敦闚睿桶跡髦磁 婓珨れ岆嗣N?峞鍚俋ㄛ?猁蛁砩崋蚘墓顏ELLPADDING棞１氯o?奻腔桶跡?賜扔禲

郔摽ㄛ菴?桶跡И杶婓ヶ珨?桶跡笢ㄛ坳婓そ躉衵?鞞尨賸鋒?腔翋闚恅趼﹝稛?桶跡岆И杶腔ㄛ稛蚎符鞞尨婓偌漃l腔衵?ㄛ奧 祥岆婓坳腔狟?﹝稛?桶跡籵綎坳垀婦漪腔桶?腔硉繄M俴但R﹝

 

D6.22 妏蚚桶跡筳俴詢?鋒?挩
Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 
osste
Newbie
Newbie


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

表格作為子頁

<TABLE>標識符最初被引入HTML是用來格式化地顯示信息。然而，隨著時間的推移，這個標識符的屬性被大大地 擴充了，現在可以將<TABLE>看成是用來在網頁中建立一個子頁的標識符。這個標識符被擴展出了那麼多的屬性，以 致於現在它很像<BODY>標識符了。在Netscape 和Microsoft的瀏覽器上，<TABLE>具有許多和<BODY>相同的屬性，你可以為表格指定 它自己的背景色和圖像。另外<TABLE>標識符還能包含所有能在<BODY>中包含的HTML標識符 。

然而，<TABLE>具有一個比<BODY>更大的優勢，每一個HTML文件必須有且只有一個< BODY>標識符，但對於<TABLE>來說，則沒有這種限制，你可以在HTML文件中包含任意數目的< ;TABLE>。

當你設計網頁時，不要讓<TABLE>這個名字愚弄了你。<TABLE>不僅僅用於建立表格，還可以在 你的網頁上建立子頁，當你想把單個網頁分成多個部分時，就用<TABLE>標識符。

　

小結

本章講述了一些重要的HTML標識符。例如，你現在知道了如何建立HTML窗體來讓你的網頁具有交互性。你還學習了一些對信息進 行列表的有用的HTML標識符。最後，你學習了怎樣用表格來組織信息，以及怎樣用表格來為你的網點進行高級網頁佈局。

下一章將介紹一些HTML中高級的標識符，你將學習怎樣使用image map、框架及cascading style sheets。在學完下一章後，你就可以設計出任何你曾經看過，甚至想過的。
Back to Top 查看 osste's 資料 搜索其他貼子 osste 訪問 osste's
 

如果你想回復的話你必須首先 login
如果你還沒有注冊的話你必須首先 注冊

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

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

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

This page was generated in 0.4844 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