?? 6-3-4.cfm.htm
字號:
<html>
<head>
<title>控制表格及其表項的對齊方式</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0">
</head>
<body>
<b><font FACE="宋體">
<p ALIGN="JUSTIFY">使用表格進行高級網頁布局</p>
</font></b><font FACE="宋體" SIZE="3">
<p ALIGN="JUSTIFY">運用表格你可以設計出非常吸引人的網頁布局，運用表格你可以非常簡單的把網頁依據不同的功能分成不同的部分。下面是個例子：</p>
<p ALIGN="JUSTIFY"><HTML></p>
<p ALIGN="JUSTIFY"><HEAD> <TITLE> Table Page Layout </TITLE>
</HEAD></p>
<p ALIGN="JUSTIFY"><BODY BGCOLOR=“white”></p>
<p ALIGN="JUSTIFY"><TABLE BGCOLOR=“yellow”WIDTH=“100%”></p>
<p ALIGN="JUSTIFY"><TR></p>
<p ALIGN="JUSTIFY"><TD ALIGN=CENTER VALIGN=CENTER></p>
<p ALIGN="JUSTIFY"><FONT FACE=ARIAL SIZE=+2> Acme Industrial Products </FONT></p>
<p ALIGN="JUSTIFY"></TD></p>
<p ALIGN="JUSTIFY"></TR></p>
<p ALIGN="JUSTIFY"></TABLE></p>
<p ALIGN="JUSTIFY"><TABLE HEIGHT=?00%擟ELLPADDING=20></p>
<p ALIGN="JUSTIFY"><TR></p>
<p ALIGN="JUSTIFY"><TD ALIGN=CENTER VALIGN=CENTER BGCOLOR=揵lue?gt;</p>
<p ALIGN="JUSTIFY"><FORM METHOD=POST ACTION=?somedirectory/mypage.asp?gt;</p>
<p ALIGN="JUSTIFY"><INPUT NAME=揌ome?TYPE=揝UBMIT?VALUE=揌OME?gt; <P></p>
<p ALIGN="JUSTIFY"><INPUT NAME=揃uy?TYPE=揝UBMIT?VALUE=揃UY?gt; <P></p>
<p ALIGN="JUSTIFY"><INPUT NAME=揌elp?TYPE=揝UBMIT?VALUE=揌ELP?gt; <P></p>
<p ALIGN="JUSTIFY"></FORM></p>
<p ALIGN="JUSTIFY"></TD></p>
<p ALIGN="JUSTIFY"><TD ALIGN=CENTER VALIGN=CENTER></p>
<p ALIGN="JUSTIFY"><TABLE HEIGHT=?00%?ALIGN=CENTER CELLSPACING=50></p>
<p ALIGN="JUSTIFY"><TR></p>
<p ALIGN="JUSTIFY"><TD></p>
<p ALIGN="JUSTIFY">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>
<p ALIGN="JUSTIFY">At Acme Industrial, you can buy the latest</p>
<p ALIGN="JUSTIFY">manufacturing equipment at the lowest prices.</p>
<p ALIGN="JUSTIFY">We have a commitment to quality that has been</p>
<p ALIGN="JUSTIFY">unserpassed for over 50 years.</p>
<p ALIGN="JUSTIFY">Browse our store and make up your own mind!</p>
<p ALIGN="JUSTIFY"></TD></p>
<p ALIGN="JUSTIFY"></TR></p>
<p ALIGN="JUSTIFY"><TR VALIGN=揵ottom?gt;</p>
<p ALIGN="JUSTIFY"><TD></p>
<p ALIGN="JUSTIFY"><FONT SIZE= -1> &copy; 1997 by Acme Industrial.</p>
<p ALIGN="JUSTIFY">Any questions about this web site? Contact the</p>
<p ALIGN="JUSTIFY"><A HREF=搈ailto: webmaster@acme.com?gt; webmaster </A></p>
<p ALIGN="JUSTIFY"></TD></p>
<p ALIGN="JUSTIFY"></TR></p>
<p ALIGN="JUSTIFY"></TABLE></p>
<p ALIGN="JUSTIFY"></TD></p>
<p ALIGN="JUSTIFY"></TR></p>
<p ALIGN="JUSTIFY"></TABLE></p>
<p ALIGN="JUSTIFY"></BODY></p>
<p ALIGN="JUSTIFY"></HTML></p>
<p ALIGN="JUSTIFY">這個例子使用了三個表格（見圖6.22）。一個用于在屏幕的正上方顯示標題Acme
Industrial Products，這個表格的背景顏色是黃色。WIDTH屬性被設為“100％”，所以這個表格將會擴大為整個屏幕的寬度。</p>
<p ALIGN="JUSTIFY">第二個表格被用來在屏幕左邊建立一個按鈕條，這個表格的背景色是藍色，并有三個Submit按鈕，可見將HTML窗體和表格混合在一起是多么簡單。另外，還要注意怎樣使用CELLPADDING屬性來將按鈕邊上的表格邊界去掉。</p>
<p ALIGN="JUSTIFY">最后，第三個表格嵌套在前一個表格中，它在屏幕右邊顯示了網頁的主體文字。這個表格是嵌套的，這樣它才會顯示在按鈕條的右邊，而不是在它的下邊。這個表格通過它所包含的表項的值來進行對齊。</p>
<p ALIGN="JUSTIFY"><img SRC="Image55.gif" tppabs="http://210.74.168.175/guide/asp/part6/Image55.gif" WIDTH="590" HEIGHT="465"></p>
<b>
<p ALIGN="CENTER">圖6.22 使用表格進行高級網頁布局</p>
</b></font>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -