2.4 表格用于布局

表格在网页布局方面起到了举足轻重的作用，表格布局好像已经成为一个标准，随便浏览一些站点，它们大多是用表格布局的。使用表格设计网页布局，可以使网页看上去更加整齐，适用于一般比较正规的网页。网页中的表格是由若干行和列组成，每一行（或者列）又由多个单元格组成，每个单元格中又可以反复地插入表格，以满足网页设计人员的布局需要。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。如图1所示，就是一幅完全使用表格进行布局的网页。

图1 使用表格布局的页面

一、如何使用表格进行布局

下面我们通过一个具体的示例，来说明如何使用表格进行布局。假如我们要用表格布局出如图2所示的页面。

图2 采样表格布局的简单页面

(1) 根据需求创建表格

大家仔细考察图2所示的页面，能看出此图中页面表格一共有7行2列，第一行占2列，第二行左边的单元格跨6行，其他单元格都是没有跨多行跨多列的单元格。所以我们应该首先创建一个7行2列的表格，然后合并第一行2个单元格，设置第二行的第一个单元格跨6行，具体代码如下：

(2) 设置表格属性

根据图片的大小以及文字的多少和大小来设计表格、行、单元格的高度、宽度、对齐方式。根据图2.所示我们来给表格设置相关属性，具体代码如下：

(3) 给表格填充内容

根据需要，在对应单元格里添加文字和图片，添加完文字和图片之后的页面，所对应的完整代码如示例1所示。

示例1:

<HTML>
<HEAD>
<TITLE>表格布局</TITLE>
</HEAD>
<BODY>
<TABLE width="280">
<TR>
   <TD colspan="2"><IMG src="images/adv.jpg" /></TD>
</TR>
<TR>
   <TD width="116" rowspan="6" align="left">
      <IMG src="images/wangyou.jpg" width="116" height="142"/>
   </TD>
   <TD><A href="#">超值变形金钢2.5折!</A> </TD>
</TR>
<TR>
<TD><A href="#">人们为啥对电视吼叫 </A></TD>
</TR>
<TR>
     <TD><A href="#">淘宝网首届翠友会！</A></TD>
</TR>
<TR>
     <TD><A href="#">比基尼美女激情海滩 </A></TD>
</TR>
<TR>
     <TD><A href="#">想做最闪亮的mm吗 </A></TD>
</TR>
<TR>
     <TD><A href="#">千余中奖机会有你吗</A></TD>
</TR>
</TABLE>
</BODY>
</HTML>