第四章 利用表格设计和制作网页在网页设计制作中，表格（Table）是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁另外，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版通过表格，可以实现很多用一般手段很难实现的排版效果，达到页面排版布局的完全控制本章以示例网页示例为介绍网页表格的设计与制作的方法通过本章的学习，读者应该掌握以下内容：l 利用DreamweaverMX 创建表格的方法l 编辑表格的方法l 设置表格属性的方法l 利用HTML编辑表格的方法l 使用表格和布局视图进行页面布局的方法4.1 表格网页实例我们在上网浏览时虽然没有看到多少表格，但许多网页设计的排版实际上都是采用隐藏了边框的表格来实现的表格化的页面在不同平台、不同分辨率的浏览器里都能显示出原有的布局和对齐图4-1所示的是“天使部落”网页利用表格进行布局的页面效果 图4-1 “天使部落”主页 Dreamweaver MX 提供了强大的制表功能，使得在制作网页的过程中插入表格的操作变得简便、快捷，并可以在表格中插入图片、文字、Flash 等各种元素表格还可以转换成层，当作层来使用（层的知识在第9章学习）。
对已经建立好的表格，可以很容易地修改表格的外观，改变表格中行、列的数量，对表格添加颜色，改变表格对齐方式等操作下面以制作“天使部落”主页为例介绍创建表格、编辑表格、在表格中添加文字和图片、删除表格等内容，并结合此例介绍设置表格和单元格的属性等方法 4.2利用Dreamweaver 8编辑网页表格4.2.1 创建表格表格主要由以下3个基本元素组成l 行（Row）：表格在水平方向上的组成元素l 列（Column）：表格在竖直方向上的组成元素l 单元格（Cell）：表格中的最小的独立存放数据的区域另外，还有以下几个概念需要掌握边框(Border)：单元格四周的界线标志表格间距(Cellspace)：定义内部表格线的宽度表格间隙(Cellpad)：相邻的单元格之间的间隙在Dreamweaver 8中，创建表格有以下4种方式l 执行主菜单中的“插入”→“表格”命令l 按组合键Ctrl+Alt+Tl 单击插入面板上“常用”选项卡中的“插入表格”按钮l 单击插入面板上“表格”选项卡中的“插入表格”按钮使用上述4种方式中任意一种方法都将打开如图4-2所示的“插入表格”对话框图4-2 “插入表格”对话框对话框中各选项含义如下。
行数：初次指定表格的总行数列数：初次指定表格的总列数单元格填充：指定单元格的大小，以像素为单位单元格间距：指定单元格之间的距离，以像素为单位宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）具体操作是，在对话框中对各选项进行设置，创建一个6行3列的表格，宽度设为100百分比或774像素，边框设为0，其他设置取默认值新建表格如图4-3所示图4-3 新建表格4.2.2 表格的编辑1. 修改表格新建立的表格必须经过部分或全部修改后才能应用修改表格主要包括调整表格的大小、合并单元格、拆分单元格等操作1）调整表格的大小可以用下列的操作之一来改变表格的大小l 移动鼠标到表格的水平或垂直边框上，当鼠标变为双竖杠或双横杠时，上下或左右拖动鼠标，可以粗略地调整表格的大小l 选中整个表格（双击表格边框），在表格边框右下方出现三个控制点，将鼠标移到控制点上，当鼠标指针变为双箭头形状时，拖动鼠标上下、左右或斜方向移动，也可以粗略地调整表格的大小l 利用表格“属性”面板，可以精确地设置表格的大小。
选中整个表格，在表格“属性”面板中的“宽（W）”、“高（H）”文本框中输入数值，如图4-4所示，精确调整整个表格的大小图4-4 利用“属性”面板调整表格的大小（2）调整行高、列宽l 调整一行或一列将鼠标指针移到要改变行或列的单元边框上，当鼠标变为双竖杠或双横杠时，上下或左右拖动鼠标至合适的行高或列宽l 利用表格“属性”面板设置选中表格中的任一单元格，或选中所在行（列），然后在表格“属性”面板中的“宽（W）”、“高（H）”文本框中输入数值如果文本框中为空白，则行高、列宽将由浏览器和ＤｒｅａｍｗｅａｖｅｒＭＸ根据单元格中的内容来自动调整l 清除行高、列宽若不能用拖动单元格边框的方法来改变所需的行高、列宽，则可以清除行高、列宽，再重新进行设置选中整个表格，执行主菜单中的“修改”→“表格”→“清除单元格高度”（或“清除单元格宽度”）命令，可以对所有单元格的高度、宽度进行压缩，直到内容最多的单元格与上下左右边框之间没有间隙为止3）合并单元格首先选中需要合并的单元格，然后利用下列的操作之一来合并单元格l 执行主菜单中的“修改”→“表格”→“合并单元格”命令l 右击选中的单元格，从弹出的快捷菜单中选择“表格”→“合并单元格”命令。
l 单击表格“属性”面板上的合并单元格按钮l 按组合键Ctrl+Alt+M利用上述4种方法之一可以将图4—3新建表格中的第1、2、6行的3表单元分别合并，将第1列的3、4行的2个单元、第4行的2、3列的2个单元分别合并合并后的效果如图4—5所示图4-5 合并单元格后的表格（4）拆分单元格拆分单元格与合并单元格互为逆操作拆分单元格就是将一个单元格拆分成需要的多个单元格同样先选中需要拆分的单元格，然后进行以下之一的操作l 执行主菜单中“修改”→“表格”→“拆分单元格”命令l 右击选中的单元格，从弹出的快捷菜单中选择“表格”→“拆分单元格”命令l 单击表格“属性”面板上的拆分单元格按钮l 按组合键Ctrl+Alt+S上述几种操作都会打开“拆分单元格”对话框，如图4—6所示，选择是拆分成行还是列，并输入要拆分成的数量即可图4-6 “拆分单元格”对话框（5）表格的嵌套为了达到排版的效果，通常使用表格嵌套的方法如在图4—1“天使部落“主页中的”理想篇>>>”、“生活篇>>>”、…等内容就是通过表格嵌套实现的具体操作方法是，将鼠标指针定位在所需位置，如在第3行2列单元格中，单击“常用”面板中的插入表格按钮，插入一个6行1列的表格。
用同样的方法可以插入另外3个表格，如图4—7所示图4-7 进行嵌套后的表格（6）表格的复制通过复制表格中的行、列或整个表格，可以达到充表格的目的具体操作如下选中一行（列）或多行（列），执行主菜单中的“编辑”→“拷贝”命令，或用鼠标右击选中的行（列），从弹出的快捷菜单中选择“拷贝”命令，或按组合键Ctrl+V，然后移动鼠标到目的位置，执行主菜单中的“编辑”→“粘贴”命令，或直接按组合键Ctrl+V，可以扩充表格的行或列若选中整个表格，再进行复制和粘贴，可以将表格扩充一倍7）删除表格将不需要的行或列删除具体操作方法是，先选中需要删除的行或列，然后执行“修改”→“表格”→“删除行”或“删除列”命令（也可以执行右键快捷菜单中的“表格”→“删除行：或“删除列”命令）当然，删除整行或整列最快捷的方法是直接按Del键需要说明的是，Dreamweaver MX可以对选中的一个或多个整行（列）执行删除操作，却不能直接删除整个表格，非要删除整个表格，可以先选中整个表格，再执行剪切操作8）增加或减少行、列跨度增加行或列的跨度，就是将相邻的单元格进行合并，减少行或列的跨度，就是将相邻的单元格进行拆分具体操作方法是，将鼠标指针定位在所需单元格中，若执行主菜单中“修改”→“表格”→“增加行宽”或“增加列宽”命令，则可以将给单元格相邻右侧或下侧的单元格进行合并；若执行主菜单中“修改”→“表格”→“减少行宽”或“减少列宽”命令，则可以将该单元格相邻右侧或下侧的单元格进行拆分。
同样，利用鼠标右击单元格，从弹出的快捷菜单选择“表格”中的相应命令也可以实现这一功能2．在表格中输入文字和图像表格调整完毕，就可以在表格中输入相应的内容了向表格中输入的内容主要是文字和图片两种形式1）在表格中输入文字参照“天使部落”主页（如图4—1所示）的文字内容，在图4—7所示的表格内按要求输入文字，并通过表格“属性”面板对文字的字号、字体、对齐方式、颜色等进行调整（表格“属性”面板的内容将在4.2.3节中学习）调整后的表格如图4-8所示图4-8 输入文字后的表格 （2）在表格中插入图像参照“天使部落”主页（如图4-1所示）的图像内容，在图4-8所示的表格内按要求插入图像( 说明，有些图像是利用层来实现插入的，有关层的内容将在第9章学习)具体操作日下 选中需要插入图像的单元格，执行主菜单“插入” “图像”命令或单击“常用”面板中的“图像”按钮，打开“选择图像源”对话框，打开存放图像的文件夹（可以事先将所需要并喜爱的图像保存或复制到该文件夹中，如站点中的images 文件夹），选中所需图像（可以从右侧的“图像预览”中看到图像），如图4-9 所示，单击“确定”按钮，图像即插入到相应的单元格中，通过鼠标适当调整图像在单元格中的大小及位置，调整后的表格如图4-10所示。
图4-9 “选择图像源”对话框图4-10 插入图像后的表格4.2.3 设置表格属性在4.2.2节中多次提到表格“属性”，下面介绍在表格“属性”面板中几种常见的设置方法1.表格整体属性设置选中整个表格，表格“属性”面板如图4-11所示，可以对表格的整体属性进行设置其中各参数的含义如下图4-11 表格“属性”面板表格名字（表格Id）：给表格对象命名，在脚本编程中可以使用行和列：当前表格行和列的数值，可以修改这两项的数值来增加或减少行数或列数宽和高：设置表格的宽度和高度可以选择使用百分比或像素值使用“属性”面板上两个按钮（清除列宽）和（清除行高）可以清除原来的宽度和高度设置；使用“属性”面板上的四个按钮（将表格宽度转为像素）、（将表格高度转换为像素）、（将表格宽度转换为百分比）、（将表格高度转化为百分比），可以将表格宽度和高度在像素和百分比之间进行转换填充：表格周围和其他元素之间的间距间距：单元格之间的间距对齐：表格在网页中的对齐方式，有默认、左对齐、居中对齐和右对齐4种选择边框：表格边框的宽度，若设为0，则在浏览网页时看不到表格边框背景颜色：设置表格的背景颜色，通过颜色拾取器按钮来选择颜色。
边框颜色：设置表格边框颜色背景图像：设置表格整体的背景图像，通过浏览文件按钮搜索背景图像的位置2.行、列和单元格属性设置选中行、列或单元格后，表格“属性”面板的设置与整个表格的设置基本一致的，只不过是应用范围上不同而已属性”面板分为上、两个区域，上面是单元格中的文字属性，可以设置文字的格式、字体、颜色、字形、对齐方式、超链接等；下面是行、列和单元格的属性设置在“属性”面板的左下方有一个示例图形，可以看出当前选择的是行、列还是单元格，如图4-12所示选择的是单元格图4-12 表格的行、列和单元格“属性”面板其中个参数的含义如下水平：设置单元格内容在单元格内的水平对齐方式，有默认、左对齐、居中对齐和齐4种选择`垂直：设置单元格内存单元格内的垂直对齐方式，有默认、顶端、中间、底部和基线4种选择宽和高：设置单元格的宽度和高度的数值只需对某一个单元格的列宽和行高设置数值，其他单元格就会自动做相应的调整。