1、第5章 表格,5.1 案例1 制作个人履历表5.2 表格标签及标签检查器5.3 案例2 使用表格设计网页5.4 实训使用表格设计“礼品店”主页,5.1 案例1 制作个人履历表,5.1.1 在页面中创建表格5.1.2 表格的基本操作5.1.3 设置表格属性,5.1.1 在页面中创建表格,表格由三个基本组件构成：行、列、单元格。表格横向叫行，纵向叫列，行列交叉的区域为单元格，如图5-2所示。一般以单元格为单位来插入网页元素，以行和列为单位来修改性质相同的单元格。 首先创建“个人履历表”，操作步骤如下： 1）在本地站点新建网页或打开指定的网页。 2）将网页标题设置为“表格的应用”。 3）确定表格插入
2、点的位置，进行下列操作之一，弹出“表格”对话框，如图5-3所示。 选择“插入表格”菜单命令。,从“插入”面板中单击表格按钮 ，或者将其拖动到页面的插入点。 按下Ctrl+Alt+T组合键。,图5-2 表格的基本组成 图5-3 “表格”对话框,“表格”对话框中各项含义如下： “表格大小”部分： 行数：指定表格的行数。 列数：指定表格的列数。 表格宽度：指定以像素为单位或按占浏览器窗口“百分比”的表格宽度。 边框粗细：指定表格边框的宽度（以像素为单位）。若希望浏览器不显示边框，可将其值设置为0像素。 单元格边距：指定单元格内容与单元格边框之间的距离，单位是像素。 单元格间距：指定相邻的单元格之间的
3、距离，单位是像素。 “标题”部分：,无：对表格不启用列或行标题。 左：将表格的第一列作为标题列。 顶部：将表格的第一行作为标题行。 两者：能够在表格中输入列标题和行标题。 “辅助功能”部分： 标题：提供一个显示在表格外的表格标题。 摘要：给出对表格的说明文本。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。 4）本例在“表格”对话框中，指定“行数”为14行，“列数”为8列，“表格宽度”为90%，“边框粗细”为2像素，“标题”内容为“个人履历表”，其它为默认值。单击【确定】按钮，创建了一个14行8列的表格，如图5-4所示。,图5-4 插入的表格,5.1.2 表格的基本操作,创建表
4、格后，根据需要常常对表格进行相应的操作，如选择表格或单元格、合并或拆分单元格、添加或删除行和列等。 选中表格或表格元素是对表格进行操作的基础。用鼠标单击某个单元格即可将其选中，若选择多个单元格，可使用下面提供的方法来完成： 选择整行单元格：将鼠标移到行的最左边，当光标变成一个向右箭头时，单击即可选中整行单元格。 选择整列单元格：将鼠标移到列的最上边，当光标变成一个向下箭头时，单击即可选中整列单元格。 选择连续的多个单元格：在需要选择的单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格方向拖曳，被拖到的单元格出现黑色边框，表示它们被选中。,选择不连续的多个单元格：按住Ctrl键的同时，单
5、击任意个不相邻的单元格，可以选中不相邻的多个单元格。 选择表格的所有单元格：在第1个单元格中单击鼠标，按住鼠标左键不放，向右下角最后一个单元格拖曳，直到所有单元格已全部被选中。下面对创建的“个人履历表”进行操作，具体操作如下： 1）插入行。为“个人履历表”插入3行。将光标置于某一行的单元格中，执行下列操作之一完成插入行的操作。 选择“修改表格插入行”菜单命令，即在插入点的下面出现一行。 选择“插入表格对象在上面插入行”菜单命令，在插入点的上面插入一行。 选择“插入表格对象在下面插入行”菜单命令，在插入点的下面插入一行。 按下Ctrl+M组合键，在插入点的下面插入一行。,选择“修改表格插入行或列
6、”命令，弹出“插入行或列”对话框，根据需要设置对话框，可实现在当前行的上面或下面插入多行。提示：插入列操作与插入行操作的方法一样。除了以上方法外，插入列操作还有一种更简便的方法：单击列最下方的绿色小三角按钮，在弹出的下拉菜单中选择“插入列”命令。2）删除列操作。从“个人履历表”中删除最右边的一列。执行下列操作之一完成操作： 选中要删除的列或者将光标置于该列中的一个单元格中，选择“修改表格删除列”菜单命令。 选中要删除的列，选择“编辑清除”菜单命令或按下Delete键。 将光标置于被删除列中的一个单元格中，按下Ctrl+Shift+-组合键。,提示：删除行操作与删除列操作的方法相似。但是，删除行
7、操作使用的是Ctrl+Shift+M组合键。3）合并、拆分单元格。选中需要合并的多个单元格，选择“修改表格合并单元格”命令将选中的多个单元格合并为一个单元格。选中需要拆分的单元格，选择“修改表格拆分单元格”命令，打开“拆分单元格”对话框。选择把单元格拆分为行还是列，并输入拆分的行数或列数，然后单击【确定】按钮。 4）调整列的宽度。执行以下操作之一调整列宽。 将鼠标指针移到要调整列的右边框，当鼠标指针变为双向箭头时，向左右拖动边框线，可使列的宽度缩小或增大。 选中要调整的列，在“属性”面板的“宽”文本框输入选中列的宽度。 编辑后的“个人履历表”如图5-5所示。,图5-5 编辑后的表格,5.1.3
8、 设置表格属性,1在表格中输入文本并设置文本对齐方式 具体操作如下： 1）向表格中输入文本。在指定的单元格中单击，设置插入点，从插入点开始，在表格中输入信息。 2）选中行或列并设置行或列文本的对齐方式。执行下列操作之一，选中行或列。将鼠标指针移动到一行的左边界或一列的顶部，当出现选择黑色箭头时单击。在单元格中单击，然后按住鼠标左健左右或上下拖动以选取相应的行或列。 3）选中行或列后，在如图5-6所示的“属性”面板中，在“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。,“属性”面板中各选项含义如下：合并所有单元格按钮。将所选的单元格、行或列合并为一个单元格。只有当单元格形成
9、矩形或直线的块时才可以合并这些单元格。 ：拆分单元格为行或列。将一个单元格分成两个或更多个单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将被禁用。 水平：指定单元格、行或列内容的水平对齐方式。可将内容对齐到单元格的左侧、右侧或使之居中对齐，也可以指示浏览器使用其默认的对齐方式（通常常规单元格为左对齐，标题单元格为居中对齐）。,图5-6 行、列或单元格对应的“属性”面板,垂直：指定单元格、行或列内容的垂直对齐方式。可将内容对齐到单元格的顶端、中间、底部或基线，或者指示浏览器使用其默认的对齐方式（通常是居中对齐）。 宽与高：所选单元格的宽度与高度，以像素为单位或按整个表格宽度或
10、高度的百分比指定。 不换行：防止换行，单元格的宽度将随文字长度的不断增加而加长。 标题：将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。 背景颜色：为选中的行、列或单元格设置背景颜色。单击按钮，会打开颜色选择器，从中选择颜色。 4）选中单元格并设置单元格文本的居中对齐。执行下列操作之一，选中一个或多个单元格。,在单元格单击，上下或左右拖动到另一个单元格。 在单元格单击，然后按住Shift键并单击另一个单元格，则以这两个单元格为顶点的矩形区域中的所有单元格均被选中。 按住Ctrl键然后依次单击单元格、行或列，选中不相邻的单元格、行或列。按下Ctrl键并单击
11、被选中的单元格、行或列可取消选中。 5）选中单元格后，在图5-6所示的“属性”面板中，在“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。“个人履历表”中的文字输入与设置效果如图5-7所示。 2设置表格属性 在页面中插入表格后，表格对应的“属性”面板如图5-8所示。可以通过修改“属性”面板中的各项参数，得到不同风格的表格。,图5-7 表格中的文字输入与设置效果,表格“属性”面板中主要参数含义如下： 表格：为表格输入一个名称，用于标识表格。 行、列：用于设置表格中行、列的数量。 宽：以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。 填充：也称单元格边距，是单元格内容和单
12、元格边框之间的像素数。对于大多数浏览器来说，此选项的值设为1。如果用表格进行页面布局时，将此参数往往设置为0。 间距：也称单元格间距，设置相邻的表格单元格间的像素数。,图5-8 表格的“属性”面板,边框：以像素为单位设置表格边框的宽度。 按钮：清除列宽按钮。从表格中删除所有明确指定的列宽数值。按钮：清除行高按钮。从表格中删除所有明确指定的行高数值。按钮：将表格宽度转换成像素按钮。将表格每列宽度的单位转换成像素，还可将表格宽度的单位转换成像素。按钮：将表格宽度转换成百分比。将表格每列宽度的单位转换成百分比，还可将表格宽度的单位转换成百分比。 下面对“个人履历表”做进一步的属性设置： 1）选中表格
13、并设置表格的对齐方式。执行下列操作之一，选中整个表格。 单击表格的左上角，或单击表格的右边界，或单击表格下边界的任何一处。,单击表格，选中“修改表格选择表格”菜单命令。 将插入点放置在表格内的任何位置，然后在文档窗口左下角的“标签选择器”中单击table标签。 2）在“属性”面板的“对齐”下拉列表中选择“居中对齐”，完成表格的居中设置。 3）选中插入的“个人履历表”，在其“属性”面板中将“边框”设置为1。 4）为表格选中的行填充颜色。选中需要填充颜色的行，在如图5-6所示的“属性”面板中，单击“背景颜色”后面的按钮，在打开的颜色选择器中选择需要填充的颜色。本例选择的颜色值为#FFFF00。 5
14、）选中表格上方的文本“个人履历表”，在“属性”面板中设置文本“字体”为隶书、“大小”为24。“个人履历表”效果如图5-9所示。 6）保存网页文档，按下F12键在浏览器中预览网页效果，最终效果如图5-1所示。,5.2 表格标签及标签检查器,HTML中一个表格通常是由、三个标签来定义的，这三个标签分别表示表格、表格行、单元格。表格的基本结构如表5-1所示。,表5-1 表格的基本结构,语法格式举例如下，在“设计”视图中生成的表格如图5-9所示。表格标题单元格1 单元格2网页中的表格除了可以在“属性”面板和“代码”视图中设置其相关属性外，还可以通过“标签检查器”来设置。选中表格，单击“窗口标签检查器”
15、菜单命令，打开“标签检查器”面板，切换到“属性”选项卡中，如图5-10所示。,在“标签检查器”中列出了表格所有的属性，如表5-2所示。 请用户根据表5-2列出的表格属性，在“标签”面板中对表格作进一步的属性设置，观察表格外观变化情况。,图5-9 生成的表格 图5-10 “标签检查器”面板,表5-2 表格的属性及含义,表5-2 表格的属性及含义（续）,5.3 案例2 使用表格设计网页,5.3.1 使用表格对网页进行布局5.3.2 导入和导出表格数据5.3.3 排序表格,5.3.1 使用表格对网页进行布局,很多网页设计者喜欢使用表格设计网页的布局。通过表格可以精确地定位网页元素，准确地表达创作意图
16、。下面以制作“我的书屋”为例，详细介绍使用表格设计网页的过程。 1）在本地站点窗口中，新建网页文件bookroom.html。 2）双击打开该文件，将页面标题设置为“使用表格设计网页”。 3）按下Ctrl+S快捷键保存网页。 4）插入表格。选择“插入表格”命令打开“表格”对话框，设置“行数”为5，“列数”为2，“表格宽度”为800像素，“边框粗细”为0像素，单元格边距与单元格间距均为0，单击【确定】按钮，在页面中插入一个5行2列的表格。,提示：对于有些表格，并不希望在浏览器中显示表格的边距和间距，可将“单元格边距”和“单元格间距”都设置为0。如果想在边框设置为0时查看单元格和表格边框，请选择“
17、查看可视化助理表格边框”命令。5）选中第1行的两个单元格，并将其合并为一个单元格；选中第2行的两个单元格，也将其合并为一个单元格。 6）选中表格的第1行，选择“插入记录图像”菜单命令，将已经准备好的图像插入到第1行中。 7）插入嵌套表格。在表格的第2行插入一个1行8列的表格，宽度设置为800像素，边框粗细、单元格边距及单元格间距均为0，单击【确定】按钮。效果如图5-12所示。,图5-12 插入嵌套表格,8）制作导航菜单。在插入的嵌套表格中输入文本，并在其“属性”面板中设置为“居中对齐”。 9）调整第一列的列宽，然后用同样的方法在表格第3行的第1列插入一个5行1列的表格，宽度设置为100%，边框
18、粗细、单元格边距及单元格间距均为0。 10）在嵌套的表格中输入栏目内容，并在其“属性”面板中设置为“居中对齐”。 11）选中输入的文本，在其“属性”面板中设置“字体”为幼圆，“大小”为18，效果如图5-13所示。,图5-13 设置文本效果,为嵌套的表格设置背景颜色。选中页面顶端嵌套的表格，在单元格“属性”面板中设置“背景颜色”为#FFFF99；选中页面左侧嵌套的表格，在单元格“属性”面板中设置“背景颜色”为#88DDF1。 选中“计算机类图书”文本所在的单元格，设置其“背景颜色”为#CC99FF，并将文本设置为粗体，用作栏目头，效果如图5-14所示。 保存页面文件，按下F12键预览网页效果 。
19、,图5-14 为嵌套的表格设置背景颜色,5.3.2 导入和导出表格数据,Dreamweaver中导入表格式数据功能能够根据素材来源的结构，为网页自动建立相应的表格，并自动生成表格数据。因此，当遇到大篇幅的表格内容需要编排，而手头又拥有相关表格式素材时，就可以使网页编排工作轻松得多。 1导入Microsoft Excel表格 把在Microsoft Excel中创建并保存的电子表格导入到Dreamweaver中后，可以像插入的表格一样设置表格。导入Microsoft Excel表格的具体操作如下： 1）先在Microsoft Excel中创建一个电子表格，并将其进行保存，如图5-15所示。,2）
20、在“我的书屋”网页窗口，将光标置于第3行的第2列中，选择“文件导入Excel文档”命令，弹出“导入Excel文档”对话框，从中选择已经准备好的Excel文档，单击【打开】按钮导入Excel文档。提示：也可以在Dreamweaver中导入Word文档，具体方法同导入Excel文档一样，请用户自行练习。,图5-15 Excel电子表格,3）选中导入的表格，在表格“属性”面板中对其进行设置。用户可边设置边预览网页效果，直到满意为止。本例是将表头字体设置为粗体，设置表格内容“居中对齐”，并为表格添加了背景颜色。页面效果如图5-16所示。 4）保存文档，按下F12键预览网页效果。,图5-16 导入的Ex
21、cel文档,2导出表格 也可以将Dreamweaver中的表格导出，具体方法如下： 1）将插入点放置在表格中的任意单元格中，选择“文件导出表格”命令，打开“导出表格”对话框，如图5-17所示。“导出表格”对话框中的选项含义如下： 定界符：指定应该使用哪种分隔符在导出的文件中隔开各项。 换行符：指定将在哪种操作系统中打开导出的文件，其列表中包含了Windows、Macintosh和 UNIX。不同的操作系统具有不同的指示文本行结尾的方式。 2）单击【导出】按钮，打开“表格导出为”对话框，从中指定保存路径，并输入文件名称，然后单击【保存】按钮。提示：在Dreamweaver中，也可以将在另一个应用
22、程序中创建并以分隔文本的格式（其中的项以制表符、逗号、分号或引号隔开）保存的表格式数据导入到Dreamweaver中。可通过以下三种方法之一完成操作： 选择“文件导入表格式数据”菜单命令。 在“插入”面板的“数据”选项栏中，单击“导入表格式数据”图标。 选择“插入表格对象导入表格式数据”命令。,5.3.3 排序表格,通过“排序表格”功能可以快速地对表格内容进行排序。具体操作如下： 1）在“我的书屋”页面中，选中导入的Excel表格。选择“命令排序表格”菜单命令，弹出“排序表格”对话框，如图5-18所示。,图5-17 “导出表格”对话框 图5-18 “排序表格”对话框,“排序表格”对话框中各项含
23、义如下： 排序按：选择表格按哪列的值进行排序。 顺序：选择是按字母顺序排序还是按数字顺序排序，以及指定是以升序对列进行排序还是以降序对列进行排序。 再按、顺序：按第一种排序方法排序后，当排序列中出现相同的结果时，设置第二种排序方法。设置方法与第一种排序方法相同。 选项：设置是否将标题行、脚注行等一起进行排序。“排序包含第一行”指设置表格的第一行是否应该排序，如果第一行是不应该移动的表格标题，则不必选择此选项。“排序标题行”指设置是否对标题行进行排序。“排序脚注行”指设置是否对脚注进行排序。“完成排序后所有行颜色保持不变”指设置排序的结果是否保持原行的颜色值。如果表格行使用两种交替的颜色，则不要
24、选择此选项以确保排序后的表格仍具有颜色交替的行。提示：有合并单元格的表格不能使用“排序表格”命令。,2）在“排序表格”对话框中，本例是在“顺序按”列表中选择“列1”，在“顺序”对应列表中选择“按数字顺序”、“升序”，其它项不做任何设置，单击【确定】按钮，表格第1列中的内容按设置进行了升序排序。效果如图5-19所示。 3）设置分隔线。选中第4行的两个单元格，并将其合并为一个单元格。选择“插入HTML水平线”菜单命令，在第4行中插入一条水平线。,图5-19 排序表格,4）选中插入的水平线，在“属性”面板中设置“宽”为100%，“高”为4，在“修改”菜单中选择“编辑标签”选项，弹出“标签编辑器-hr
25、”对话框，在列表中选择“浏览器特定的”选项，输入颜色值#FFCC33，如图5-20所示，然后按下【确定】按钮。 5）输入相关版权信息。选中最下面的一行，将该行中的单元格合并为一个单元格，输入版权信息，并将其设置为“居中对齐”。 6）选中整个表格，在“属性”面板中设置“对齐”方式为“居中对齐”，使网页内容在浏览器中的显示位置居中。 7）保存网页文档，按下F12键预览网页效果。网页最终效果如图5-11所示。,图5-20 “标签编辑器-hr”对话框,5.4 实训使用表格设计“礼品店”主页,1实训要求 掌握利用表格进行网页布局的方法 练习在网页中导入外部表格数据 练习表格数据的属性设置与排序 2实训指
26、导 1）插入一个4行2列的表格。 2）对插入的表格进行合并单元格、插入嵌套表格、拆分单元格等操作，调整成如图5-21所示的样式。,图5-21 插入并调整表格,3）在第1行插入Logo图像。 4）在第2行的单元格中插入文字，并在“属性”面板中设置文字对齐方式等属性，效果如图5-22所示。5）新建一个Excel数据表格，如图5-23所示。,图5-22 插入Logo图像和文字,图5-23 数据表,6）在第3行的左侧3个单元格中分别插入图片，或者输入文字，并对插入的图片或文字进行属性设置。 7）在第3行的第4个单元格中导入Excel数据表格，并对其进行属性设置。 8）在最后一行中输入版权信息，并将其设置为“居中对齐”。 9）选中整个表格，在“属性”面板中设置“对齐”方式为“居中对齐”，使网页内容在浏览器中的显示位置居中。 10）保存网页文档，按下F12键预览网页效果。网页最终效果如图5-24所示。,图5-24“礼品店”网页效果图,本章完,
