7.1 认识表格的作用

提到表格，很多读者会不自觉地想到Word中的表格。在实际工作中，组织一份二维数据的文档需要在Word中绘制表格，比如学生成绩表、学习课程表。同样，在网页中组织二维数据，也常用表格双标签<table></table>来实现，并且看上去和Word表格的效果非常相似。这也是表格标签本来的作用。

在网页的不断发展中，很多人渐渐发现表格不但可以组织二维数据表示在网页上，用来做页面的布局也非常合适。于是，表格开始作为网页布局的主要方式流行了起来。接下来，了解一下表格标签在两个方面的具体使用。

7.1.1 用表格组织数据

在D:\web\目录下创建网页文件，命名为table.htm。先绘制一个简单的表格，步骤如下：

（1）打开Dreamweaver，编辑table.htm。

（2）Dreamweaver切换到设计模式（可视化模式）。

（3）然后单击“插入”按钮，在下拉菜单中选择表格。

（4）在弹出的对话框中填写询问表格的参数，在行数和列数分别输入3、5。

（5）再单击“确定”按钮。

这样就完成了一个3行5列的表格制作，设计视图效果如图7.1所示。

向表格的空格里随意填写数据，保存该网页后在浏览器地址栏输入http://localhost/table.htm，浏览效果如图7.2所示。

怎么样？操作是不是和Word很相似呢？对，这就是表格标签的本来作用，即组织二维数据在网页上表现出来。比较图7.1和图7.2的差异，在操作中读者会发现表格单元格之间的比例随着数据在动态变化。所以图7.2所示的效果肯定不是读者所期待的。

读者不能满足于像操作Word表格那样的简单拖放操作，不然在以后会出现很多无法理解的问题。读者还是要以HTML代码为核心深刻地理解表格标签。

7.1.2 用表格布局网页

前面讲到了由于表格的方便性，各大网站常用它来布局网页。本小节在Dreamweaver中做一个快速表格布局网页的示范。

（1）在D:\web\目录下创建网页文件，命名为table2.htm，并用Dreamweaver编辑table2.htm。

（2）单击工具栏的“布局”按钮切换Dreamweaver到布局模式，如图7.3所示。

（3）单击“布局”按钮右边的“布局表格”按钮。

（4）在页面上绘制布局表格，尽量布满整个页面。

（5）单击“布局表格”按钮旁边的“布局单元格”按钮。

（6）在页面布局表格内绘制相应的单元格来划分页面版块。

一个网页布局就轻松完成了，接下来就在布局单元格中放入相应的文字、图片等资源，设计效果如图7.4所示。

在操作布局表格和布局单元格的时候，可以比较上一小节直接插入表格的方法。布局模式操作表格更加灵活。比如，单元格可以随意调整位置，单元格比例也不必固定，而且调节单元格边缘的6个手柄可以拖曳完成高宽设置，这对网页布局功能版块非常有利。

既然Dreamweaver的布局模式实质上还是通过HTML代码操作的，因此读者只要理解好了表格标签，就能很轻松地编写HTML代码来实现各种各样不同的网页布局。接下来，从头至尾完整地学习表格标签的HTML代码。