7.6 表格的互相嵌套

通过多种HTML元素的学习，读者知道，很多HTML标签可以互相嵌套，例如：

同样，为了实现更复杂的结构，表格也可以互相嵌套。

7.6.1 嵌套表格的作用

表格嵌套，即一个表格嵌套在另一个表格的单元格中，如此反复。多重嵌套的表格有什么作用呢？多重嵌套表格多用于网页布局，构建网页的框架结构。因为嵌套表格比单个表格更利于复杂布局结构的处理。在D:\web\目录下创建网页文件，命名为table_table.htm，编写代码如代码7.15所示。

在浏览器地址栏输入http://localhost/table_table.htm，浏览效果如图7.24所示。

通过表格的嵌套，可以把页面上不同结构的内容放置在同一个表格整体内。

7.6.2 表格布局网页实例

本节用表格嵌套的方法布局一个HTML网页，由于是编写HTML代码，所以不需要使用Dreamweaver软件。嵌套表格的代码编写比较繁杂，请读者制作时一定要规范代码的编写，可以遵循笔者的格式，以便条理清晰。

布局网页前首先要保证最外围的表格应该水平居中对齐，并且和页面顶部没有空隙（即body设置topmargin属性为0）。在D:\web\目录下创建网页文件，命名为table_html.htm，编写代码如代码7.16所示。

在浏览器地址栏输入http://localhost/table_html.htm，浏览效果如图7.25所示。

通过表格的嵌套，一个简单的企业网站就基本布局完成了。其实难度并不大，只要先把表格的结构与多个表格的嵌套关系理顺，然后逐步设置不同单元格的宽度和高度即可。综合上面的表格知识，读者已经可以轻松地控制表格，发挥其强大的布局作用，使网页内容井井有条。

7.6.3 用Photoshop切片迅速生成布局表格

由于编写嵌套表格代码布局网页不够直观，很大一部分人无法很好地掌握。其他更快捷的表格布局网页方法迅速成为主流，在网站开发中，比较常用的快速布局方法有Dreamweaver布局和Photoshop切片布局。Dreamweaver快速布局在前面学习过，笔者接下来介绍Photoshop切片快速布局。

Photoshop是图像处理领域的主流软件，Photoshop常用来制作网页平面效果图。为了缩短网站开发周期，很多“速成”网页直接用Photoshop的“切片”功能布局网页，具体方法如下。

（1）打开Photoshop软件，并打开一个已经制作好的网页效果图，如图7.26所示。

（2）单击Photoshop左边工具箱的“切片工具”，如图7.27所示。

（3）使用“切片工具”在效果图上按网页的布局切分成多个小图，如图7.28所示。

（4）单击菜单栏“文件|存储为Web所用格式”（快捷键为“Alt+Shift+Ctrl+S”），将弹出如图7.29所示的设置对话框，这里可以设置图片输出格式。

（5）使用对话框左边的“切片选择工具”选择不同的切片小图片，分别在右边的选项中选择合适的图片格式及图片质量。确定各个切片的输出图片后，单击如图7.29所示位置，在弹出的菜单中选择“编辑输出设置”，如图7.30所示。

（6）在“输出设置”对话框中，于如图7.30所示下拉菜单中选择“切片”项。下面将会出现切片输出内容的设置，一般选择“生成表格”，即以表格布局网页，切好的小图片放置于单元格中。设置完成后单击“好”按钮，退出对话框，如图7.31所示。

（7）退出“输出设置”对话框后，单击“存储”按钮，系统将弹出存储路径对话框。读者在这里要注意，输出的文件保存类型须修改为“HTML和图像（*.html）”，即输出的将是Photoshop生成的一个表格布局的网页文件和切片后的小图片。选择合适的保存路径，单击“保存”按钮即完成Photoshop切图，如图7.32所示。

这个HTML网页是Photoshop自动生成的，并且完成了快速的表格布局。表格的单元格划分是根据切片的划分确定的，每个单元格中都插入一个切片图片。这个布局表格没有边框和边距，所以这个网页看上去和Photoshop中的效果图是一样的，可以理解为网页效果图被Photoshop切为一个个小的图片文件，然后Photoshop自动生成网页及布局表格，把图片重新组合起来。

这种网页布局方法速度非常快，可以迅速地把网页美工制作的页面效果图转换为网页。不过这种网页的HTML代码冗余部分太多，结构不易维护与修改。并且使用了大量的图片，所以在实际工作中必须进一步地优化其HTML代码，减少图片的参与。