使用表格进行高级网页布局

运用表格你可以设计出非常吸引人的网页布局，运用表格你可以非常简单的把网页依据不同的功能分成不同的部分。下面是个例子：

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

&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=揵ottom?gt;

<TD>

<FONT SIZE= -1> &copy; 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 使用表格进行高级网页布局