📄 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 + -