使用表格进行高级网页布局
运用表格你可以设计出非常吸引人的网页布局,运用表格你可以非常简单的把网页依据不同的功能分成不同的部分。下面是个例子:
<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=揵lue?gt;
<FORM METHOD=POST ACTION=?somedirectory/mypage.asp?gt;
<INPUT NAME=揌ome?TYPE=揝UBMIT?VALUE=揌OME?gt; <P>
<INPUT NAME=揃uy?TYPE=揝UBMIT?VALUE=揃UY?gt; <P>
<INPUT NAME=揌elp?TYPE=揝UBMIT?VALUE=揌ELP?gt; <P>
</FORM>
</TD>
<TD ALIGN=CENTER VALIGN=CENTER>
<TABLE HEIGHT=?00%?ALIGN=CENTER CELLSPACING=50>
<TR>
<TD>
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=揵ottom?gt;
<TD>
<FONT SIZE= -1> © 1997 by Acme Industrial.
Any questions about this web site? Contact the
<A HREF=搈ailto: webmaster@acme.com?gt; webmaster </A>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
这个例子使用了三个表格(见图6.22)。一个用于在屏幕的正上方显示标题Acme Industrial Products,这个表格的背景颜色是黄色。WIDTH属性被设为“100%”,所以这个表格将会扩大为整个屏幕的宽度。
第二个表格被用来在屏幕左边建立一个按钮条,这个表格的背景色是蓝色,并有三个Submit按钮,可见将HTML窗体和表格混合在一起是多么简单。另外,还要注意怎样使用CELLPADDING属性来将按钮边上的表格边界去掉。
最后,第三个表格嵌套在前一个表格中,它在屏幕右边显示了网页的主体文字。这个表格是嵌套的,这样它才会显示在按钮条的右边,而不是在它的下边。这个表格通过它所包含的表项的值来进行对齐。
图6.22 使用表格进行高级网页布局