首页 > 代码库 > 2.4 表格用于布局

2.4 表格用于布局

2024-07-08 20:15:52   215人阅读

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

图1 使用表格布局的页面
图1 使用表格布局的页面

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

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

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

(1) 根据需求创建表格

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

<TABLE>
  <TR>
   <TD colspan="2"> </TD>
  </TR>
  <TR>
   <TD rowspan="6" > </TD>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
</TABLE>

(2) 设置表格属性

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

<TABLE width="280">
  <TR>
   <TD colspan="2"> </TD>
  </TR>
  <TR>
   <TD rowspan="6" width="116" align="left"> </TD>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
  <TR>
   <TD> </TD>
  </TR>
</TABLE>

(3) 给表格填充内容

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

示例1:

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

示例1运行效果如图2所示。

本章总结

◆  创建表格至少需要3对标签，即表格标签<TABLE>…</TABLE>、行标 签<TR>…</TR>和单元格标签<TD>…</TD>。

◆  创建跨多列的表格是在单元格里使用colspan属性进行设置，创建跨多行的表格是在单元格里使用rowspan属性进行设置。

◆ 表格的美化修饰主要从以下几个方面进行：

    ●  表格的高度(height)、宽度(width)和边框(border)。

    ● 表格的背景（bgcolor和background）、行的背景色(bgcolor)、列的背景色(bgcolor)。

    ●  表格、行、列的对齐方式(align)。

    ● 表格的填充(cellpadding)、间距(cellspacing)属性。

◆ 表格可在一定程度上控制文本和图像在网页中的位置，而不是完全由浏览器对此进行控制。

本章作业：

制作如下图网页。 

html基础 表格用于布局 作业

注意事项：

1.结合上阶段联系的结果，制作一个简单的拍拍网顶端内容的表格美化。

2.2行的表格，有些是图片，大家看看是怎么样布局吧。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第二章案例及作业资源 返回《HTML入门经典》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/html/jc/502.html


联系
我们