网页制作(第6章)

第6章表格【学习目标】（1）掌握表格的基本操作（2）掌握表格的属性设置（3）熟悉表格的高级应用表格（Table）作为一种有效的数据组织方式，在网页中使用的非常广泛。

通过表格进行页面规划和布局，会得到非常好的效果。

本章将详细介绍表格的相关知识。

6.1表格的基本操作本节主要学习表格的基本操作，如插入表格、选择表格、输入内容、单元格的拆分与合并等。

6.1.1插入表格插入表格可以通过菜单命令来实现，单击【插入】|【表格】命令菜单，打开【表格】对话框，在该对话框中可以设置表格的行数、列数、宽度等参数，如图6-1所示。

【表格】对话框中各主要参数的含义如下：【行数】设置表格行的数目。

【列】设置表格列的数目。

【表格宽度】设置表格的宽度，可以以像素或者占浏览器窗口宽度的百分比为单位。

【边框粗细】设置表格边框的宽度。

【单元格边距】设置单元格内容与单元格边框间的距离，以像素为单位。

【单元格间距】设置相邻两个单元格之间的距离。

注：单击【插入】面板的【常用】选项中的【表格】命令菜单，也可以插入表格，如图6-2所示。

图6-1 【表格】对话框图6-2 【插入】面板6.1.2 选择表格编辑表格之前，首先需要选中表格，可以选中整个表格、行或列以及单元格，下面分别进行介绍。

1.选中整个表格选中整个表格有多种方法，下面介绍其中常用的三种方法：方法一：将鼠标移到表格的边框上，当光标变成双向箭头形状时单击鼠标，即可选中表格，如图6-3所示。

图6-3 选择整个表格方法二：将光标移到某个单元格中，单击鼠标右键，在弹出的快捷菜单中点击【表格】|【选择整个表格】命令菜单，如图6-4所示。

图6-4 快捷菜单方法三：按住【Shift】键的同时，单击表格中任意位置即可。

表格选中后，在表格的边框将会出现三个黑色小方块，如图6-5所示。

图6-5 选中表格2 选中表格中的行。

将鼠标移到表格中某一行的左侧，当鼠标指针变成向右的黑色小箭头时，同时这一行的边框显示为红色，如图6-6所示，单击鼠标左键即可；如果再拖动鼠标，可以选中多行。

图6-6 鼠标指向行3 选中表格中的列将鼠标移到表格中某一列的上方，当鼠标指针变成向下的黑色小箭头时，同时这一列的边框显示为红色，单击鼠标左键即可，如图6-7所示；如果再拖动鼠标，可以选中多列。

图6-7 选中表格列4 选中一个单元格选中一个单元格的方法有以下几种：方法一：按【Ctrl】键的同时，单击所要选中的单元格方法二：将光标置于要选中的单元格中，单击【编辑】|【全选】命令菜单。

5 选中多个单元格选中多个单元格有以下几种方法方法一：将光标置于要选中的单元格中，然后拖动鼠标至最后一个单元格，可以选中连续的单元格，如图6-8所示。

图6-8 选中连续的单元格方法二：按【Ctrl】键的同时，单击所要选中的单元格，可以选中多个不连续单元格，如图6-9所示。

图6-9 选中不连续的单元格6.1.3 输入内容在单元格中可以插入文本、图片等内容，下面我们来学习如何在表格中输入内容。

1 插入文本在单元格中插入文本有以下几种方法：方法一：直接输入文本。

方法二：将其他文本复制并粘贴到表格单元格中。

2 插入图片插入图片的具体步骤如下：第1步：将光标置于需要插入图像的单元格中。

第2步：单击【插入】|【图像】命令菜单，在弹出的对话框中选择要插入的图片。

第3步：完成图片插入，如图6-10所示。

图6-10 插入图片6.1.4 单元格的拆分与合并拆分是指将一个单元格拆分为多个单元格；合并是指将多个连续的单元格合并成一个单元格。

下面将详细讲解单元格的拆分与合并。

1 单元格的拆分拆分单元格的具体步骤如下：第1步：将光标置于要拆分的单元格中，单击【属性】栏中的按钮，打开【拆分单元格】对话框。

第2步：在该对话框中选择【行】或【列】单选按钮，并在【行数】或者【列数】文本框中输入要拆分的单元格的数量，如图6-11所示。

图6-11 【拆分单元格】对话框第3步：单击【确定】按钮，完成单元格的拆分操作，如图6-12所示。

图6-12 拆分单元格注：拆分单元格的方法还有：方法一：选中要拆分的单元格，单击鼠标右键，在弹出的快捷菜单中单击【表格】|【拆分单元格】命令菜单。

方法二：选中要拆分的单元格，单击【修改】|【表格】|【拆分单元格】命令菜单。

2合并单元格合并单元格的具体步骤如下：第1步：选中需要合并的多个单元格，如图6-13所示。

图6-13 选中多个单元格第2步：单击【属性】栏中的按钮，完成单元格的合并，如图6-14所示。

图6-14 完成单元格合并注：合并单元格的方法还有：方法一：选中要合并的多个单元格，单击鼠标右键，在弹出的快捷菜单中单击【表格】|【合并单元格】命令菜单。

方法二：选中要合并的多个单元格，单击【修改】|【表格】|【合并单元格】命令菜单。

6.1.5 行（列）的添加与删除为增加或减少表格中的数据，可以根据需要插入或者删除行（列），下面我们就来学习行（列）的插入与删除。

1 插入行（列）插入行的具体步骤如下：第1步选中表格中的第3行学生成绩信息。

第2步：单击鼠标右键，从弹出的快捷菜单中单击【表格】|【插入行】或者【表格】|【插入列】命令菜单，如图6-15所示。

图6-15 插入行的快捷菜单第3步：完成插入行操作，效果如图6-16所示。

图6-16 插入行插入行（列）的方法还有以下几种：方法一：单击【插入】|【表格对象】命令菜单，在打开的快捷菜单中选择插入或列的方式。

方法二：单击【修改】|【表格】|【插入行】，可以在当前单元格的上方插入一行。

方法三：单击【修改】|【表格】|【插入行或列】，打开【插入行或列】对话框，可以设置插入行的数量或者列的数量。

2 删除行（列）删除行（列）的步骤如下：第1步：将光标置于需要删除的行（列）中的任意单元格。

第2步：单击鼠标右键，在弹出的快捷菜单中单击【表格】|【删除行】或者【表格】|【删除列】命令菜单，如图6-17所示。

图6-17 删除行6.1.6嵌套表格在表格中插入新的表格，称为嵌套表格，用这种方式可以创建出复杂的表格，具体操作步骤如下：第1步：将光标置于要插入表格的单元格中。

第2步：单击【插入】|【表格】命令菜单，与新建表格一样，在弹出的【表格】对话中输入行数、列数等相关信息，单击【确定】按钮，完成嵌套表格，如图6-18所示。

图6-18 嵌套表格6.2 表格属性设置表格属性可以美化表格，以达到网页布局所需要的效果。

设置表格属性分为整个表格的属性设置和行、列和单元格的属性设置。

6.2.1设置表格属性要设置表格属性，首先要选定整个表格，然后利用【属性】栏进行设置，具体步骤如下：第1步：选定需要设置属性的表格，如图6-19所示。

图6-19 选中的表格第2步：打开表格【属性】栏，查看表格属性，如图6-20所示。

图6-20 表格【属性】在表格【属性】栏中：【行】和【列】：设置表格的行数和列数，这里都设置为5。

【宽度】设置表格的宽度，有像素和百分比两种单位。

【填充】设置单元格内容与单元格边框间的距离。

【间距】设置相邻单元格间的距离，这里设置为4。

【对齐】设置表格在段落中的对齐方式，有默认、左对齐、右对齐和居中对齐四种，这里设置为居中对齐。

【边框】设置表格的边框宽度，这里设置为0。

第3步：完成表格属性设置，效果如图6-21所示。

图6-21 设置完属性后的表格6.2.2设置行、列和单元格属性除了可以设置整个表格属性外，还可以单独对行、列和单元格的属性进行设置，具体步骤如下：第1步，选中需要设置属性的行、列或单元格。

第2:步，打开【属性】栏，查看所有属性，如图6-22所示。

图6-22 表格行的【属性】栏在表格行【属性】栏中：【水平】设置行、列或单元格的内容的水平对其方式。

【垂直】设置行、列或单元格的内容的垂直对其方式。

【宽】和【高】分别设置行、列或单元格的高度和高度。

【背景颜色】设置行、列或单元格的背景颜色。

【标题】设置选定的内容为表头。

第3步，设置完后的效果如图6-23所示。

6.2.3 制作细线表格细线表格在网页制作中经常用到，下面就来学习制作细线表格，具体步骤如下：第1步：选中要设置的表格，切换到代码视图中，在标签<table>中按空格键，弹出如图6-24所示的参数列表。

图6-24 选择标签第2步：双击【bgcolor】选项，在弹出的颜色选择器中选择黑色，如图6-25所示。

图6-25 选择颜色第3步：切换到设计视图，选择所有单元格，在【属性】栏中设置【背景颜色】为白色，如图6-26所示。

图6-26 设置单元格的背景颜色第4步：完成设置，保存文档并在浏览器中预览，效果如图6-27所示。

图6-27 细线表格效果6.3 表格实例下面通过两个实例来介绍一下表格的应用。

6.3.1 导入表格数据Dreamweaver CS4可以把表格数据导入网页，导入的数据可以是Word、Excel、xml 和文本文件。

下面以图6-28所示的Excel表格为例来具体介绍。

导入Excel表格中数据的具体步骤如下：第1步：单击【文件】|【导入】|【Excel文档】命令菜单，打开【导入Excel文档】对话框，如图6-29所示。

图6-28 Excel表格图6-29 【导入Excel文档】对话框第2步：选择要导入的Excel文档，并单击【打开】按钮，完成导入，如图6-30所示。

图6-30 导入Excel文档6.3.2 排序表格Dreamweaver CS4可以对表格中的数据进行排序。

下面以刚刚导入的表格作为实例进行演示，具体步骤如下：第1步：选中要排序的表格，如图6-31所示。

第2步：单击【命令】|【排序表格】，弹出【排序表格】对话框，在【排序按】下拉列表中选择“列4”，即按基本工资排序；在【顺序】下拉列表中选择“按数字顺序”、“降序”；设置完成后，单击【确定】按钮，如图6-32所示。

图6-31 选中要排序的表格图6-32 【排序表格】对话框第3步：完成设置，表格按照第4列基本工资的数值由高到低排序，如图6-33所示。

图6-33 排序后的表格课后习题一. 选择题1．在Dreamweaver 中，下面操作不能通过鼠标选择整个表格是（）。

A．当光标在表格中时，在界面窗口左下角的标签选择器中单击<table>标签B．将鼠标移动到表格的底部或者右部的边框，当鼠标指针变成箭头形状时单击鼠标C．将鼠标移到任何的表格框上，当鼠标指针变成如下图形状时，单击鼠标D．把鼠标指针移到单元格里，再双击鼠标2. 在Dreamweaver 中，我们使用命令可以一次插入多少行和多少列：（）A. 只能是一行一列B. 只能是二行二列C. 只能是三行三列D. 可任意多行任意多列3.在Dreamweaver中，下面的操作不能插入一行的是：（）A. 将光标定位在单元格中，打开Modify菜单，选择Table子菜单中的Insert Row命令B. 在行的单元格中单击鼠标右键，打开快捷菜单，选择Table子菜单中的Insert Row 命令C. 将光标定位在最后一行的最后的一个单元格中，按下Tab键，在当前行下会添加一个新行D. 把光标定位在最后一行的最后的一个单元格中，按下组合键Ctril+W，就在当前行下会添加一个新行4. 在Dreamweaver 中，下面关于删除行和列的说法错误的是：（）A. 在行和列中单击鼠标右键打开快捷菜单，选择table 子菜单中的delete row 命令，可以删除光标所在的整行B. 在行和列中单击鼠标右键打开快捷菜单，选择table子菜单中的delete column命令，可以删除光标所在的整行C. 在删除行和列时，行会从表格左侧开始删除，列会从表格的上部开始删除D. 快速删除行和列，在表格中选中一整行或一整列，然后按DELETE键5. 在Dreamweaver中，下面关于拆分单元格说法错误的是：（）A 用鼠标将光标定位在要拆分的单元格中，在属性面板中单击按钮B 用鼠标将光标定位在要拆分的单元格中，在拆分单元格中选择行，表示水平拆分单元格C 用鼠标将光标定位在要拆分的单元格中，选择列，表示垂直拆分单元格D 拆分单元格只能是把一个单元格拆分成两个6. 在Dreamweaver中，下面关于排版表格属性的说法错误的是：（）A. 可以设置宽度B. 可以设置表格的背景颜色C. 可以设置高度D. 不能设置单元格内部的内容7. 在Dreamweaver中可以导入多种格式的文档，其中包括：（）（多选题）A WORD文档B EXCEL文档C AUTOCAD文档D 3D MAX文档8. 在Dreamweaver中，按住（）键同时画布局单元格，便可以连续新建多个布局单元格：（）A. Shift B . Ctrl C . Alt D . Shift+Alt9. 在Dreamweaver 中，下面关于排版单元格说法错误的是: ( )A. 单击单元格的边框，即可以选中其单元格B. 按住ALT键，同时在想要选中的单元格内任意处单击鼠标，即选中了单元格C. width是单元格的宽度，有两种方式，一种固定的数值的，一种是自动伸缩D. 排版单元格属性中可以设置单元格的背景颜色10.在Dreamweaver 中，下面关于导入和导出表格数据说法错误的是：( )A. Dreamweaver 提供了与外界数据交换的工具B. word文档可以导入到DR 中并格式化为表格C. 文本文件不可以导入到DR 中并格式化为表格D. 可以将网页中的表格导出为word文档11. 按住什么键，同时在想要选中的排版单元格内任意处单击鼠标，可选中单元格：（）A. shiftB. ctrlC. altD.s hift+alt12. 在Dreamweaver 中，下面关于复制和粘贴文本说法正确的是:( )A. 只能在HTML内进行复制与粘贴B. 只能从外部文件复制到HTML文件内，不能从HTML文件中复制文本到外部文件C. HTML文件和其他文件之间可以相互进行复制与粘贴D. 以上说法都错二．填空题。