第5章 表格 本章学习知识点 ●掌握表格的创建和设置 ●掌握如何在表格中插入网页元素 开始.

Presentation on theme: "第5章 表格 本章学习知识点 ●掌握表格的创建和设置 ●掌握如何在表格中插入网页元素 开始."— Presentation transcript:

1 第5章 表格 本章学习知识点 ●掌握表格的创建和设置 ●掌握如何在表格中插入网页元素 开始

2 本章内容目录 5.1 表格基本操作 5.2 表格高级应用

3 5.1 表格基本操作 5.1.1 插入表格 5.1.2 表格属性设置 5.1.3 单元格属性设置 5.1.4 表格的选取
5.1 表格基本操作 插入表格 表格属性设置 单元格属性设置 表格的选取 添加删除行和列 合并拆分单元格 在表格中插入网页元素

4 插入表格 将鼠标光标定位至要插入表格的位置，选择主菜单“插入”→“表格”命令（快捷键为Ctrl＋Alt＋T），或者单击“常用”插入栏中的“表格”按钮，弹出“表格”对话框，在对话框中设置表格属性，如图5-1所示。 插入的表格如图5-2所示。 图5-1 “表格”对话框 图5-2 插入的表格

5 5.1.2 表格属性设置 可以在表格的“属性”面板中设置已插入的表格的更多属性，表格的“属性”面板如图4-3所示。
表格属性设置 可以在表格的“属性”面板中设置已插入的表格的更多属性，表格的“属性”面板如图4-3所示。 图5-3 表格的“属性”面板 “属性”面板中的主要属性功能如下： 1、表格ID：为表格设置一个唯一的名字。 2、行：设置表格的行数。 3、列：设置表格的列数。 4、宽：设置表格的宽度，可以以像素或者百分比为单位。 5、高：设置表格的高度，可以以像素或者百分比为单位。 6、填充：设置单元格内的内容与单元格边框的距离，即单元格边距。

6 7、间距：设置单元格之间的距离，即单元格间距。
8、对齐：设置表格在页面上的对齐方式，有“左对齐”、“居中对齐”和“右对齐”三种对齐方式。 9、边框：设置表格的边框的宽度，单位为像素。 10、背景颜色：设置表格的背景颜色。可以单击 按钮，在弹出的拾色器中选择需要的颜色，也可以直接在右侧的文本框中输入颜色的值。 11、背景图像：设置表格的背景图像。单击右侧的 按钮，在弹出的“选择图像源文件”对话框中选择需要的图片。 12、边框颜色：设置表格的边框的颜色。 在“对齐方式”下拉列表框中选择对齐方式为“居中对齐”，在“背景颜色”右侧的对话框中设置背景颜色为#669933，在“边框颜色”右侧的文本框中设置边框颜色为#FFCC00，效果如图5-4所示。 图5-4 设置属性后的表格

7 单元格属性设置 表格是由单元格组成的，如创建一个3行4列的表格，就有3×4共12个单元格。在设置好整个表格的属性后，多数的工作是在对一个个单独的单元格进行处理。 将鼠标光标置于单元格中，下方将出现单元格的“属性”面板，如图5-5所示。 图5-5 单元格的“属性”面板 单元格“属性”面板中的主要属性功能如下： 1、 按钮：用来合并选中的单元格或者将一个单元格拆分成几行或者几列。 2、水平：设置单元格中内容在水平方向上的对齐方式。共有“左对齐”、“居中对齐”和“右对齐”3种对齐方式。

8 5.1.4 表格的选取 选择表格或者表格中的某些单元格，有以下方法： 1．选择整个表格 要选择整个表格有以下几种方法：
3、垂直：设置单元格中内容在垂直方向上的对齐方式。共有“顶端”、“居中”、“底部”和“基线”4种对齐方式。 4、宽：设置单元格的宽度，单位为像素。 5、高：设置单元格的高度，单位为像素。 6、不换行：选中此复选框，单元格中的内容将不换行，单元格会被内容撑开。 7、标题：选中此复选框，将此单元格中的内容设置为表格的表头。 8、背景：为单元格设置背景图像。 9、背景颜色：设置单元格的背景颜色。 10、边框：设置单元格的边框颜色。 表格的选取 选择表格或者表格中的某些单元格，有以下方法： 1．选择整个表格 要选择整个表格有以下几种方法：

9 2．选择一行表格 选择整行表格有以下方法： 1、将鼠标光标移到表格的任意一个边框上，当鼠标光标变为 形状时，单击鼠标左键，即可选中整个表格。
1、将鼠标光标移到表格的任意一个边框上，当鼠标光标变为 形状时，单击鼠标左键，即可选中整个表格。 2、将鼠标光标移动到表格的最外面的边框上，当鼠标光标变为 形状时，单击鼠标左键，即可选中整个表格。 3、将鼠标光标置于任意一个单元格内，选择“修改”→“表格”→“选择表格”命令，或者按下Ctrl＋A键两次，即可选中整个表格。 4、将鼠标光标置于任意单元格内，单击文件编辑窗口左下角的<table>标签，即可选择整个表格。 2．选择一行表格 选择整行表格有以下方法： 1、将鼠标光标置于要选择的行的第1个单元格中，按住鼠标左键拖动至此行的最后一个单元格，释放鼠标，即可选择整行表格，如图5-6所示。 2、将鼠标移动至要选择的行的左边框上，将出现选定箭头 ，单击鼠标左键，即可选择此行表格，如图5-7所示。 图5-6 拖动选择 图5-7 单击选择

10 3．选择一列表格 要选择一列表格有以下方法：
3、将鼠标光标置于要选择的行的任意一个单元格中，单击文件编辑窗口左下角的<tr>标签，即可选择整行表格，如图5-8所示。 图5-8 通过标签选择 3．选择一列表格 要选择一列表格有以下方法： 1、将鼠标光标置于要选择的列的最上方的单元格中，按住鼠标左键向下拖动，一直拖动到最底部的单元格，释放鼠标左键，即可选择整列表格，如图5-9所示。 2、将鼠标光标移至要选择的列的上边框上，将出现选择箭头 ，单击鼠标左键，即可选择整列表格，如图5-10 所示。 图5-9 拖动选择 图5-10 单击选择

11 选择多个位置连续的单元格可以有以下方法：
4．选择多个连续的单元格 选择多个位置连续的单元格可以有以下方法： 1、先将鼠标光标移动至一个单元格中，按住鼠标左键横向或者纵向拖动鼠标，移动至要选择的最后一个单元格释放鼠标，即可选择这些连续的单元格，如图4-11所示。 2、选定第一个单元格，按住Shift键，单击另一个单元格，即可选中这个区域中的所有单元格。 图5-11 选择多个连续单元格 5．选择多个不连续的单元格 要选择多个在位置上不相邻的单元格，可以有以下方法： 1、按住Ctrl键，依次单击要选择的单元格，即可选中这些单元格。

12 5.1.5 添加删除行和列 在Dreamweaver 8中，可以随时在任意位置添加或者删除任意数目的行或者列。 1．添加一行
2、先选中所有的单元格，然后按住Ctrl键依次单击不需要选中的单元格，取消选中状态，即可选中所有要选择的单元格，如图5-12所示。 图5-12 选择多个不连续的单元格 添加删除行和列 在Dreamweaver 8中，可以随时在任意位置添加或者删除任意数目的行或者列。 1．添加一行 为表格添加行的方法如下： 1、将鼠标光标置于任意单元格中，选择“修改”→“表格”→“插入行”命令，或者按Ctrl＋M组合键，即可在该行上方插入一行，如图4-13所示。 2、将鼠标光标置于任意单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“插入行”命令，即可插入一行。

13 3、将鼠标光标置于任意单元格中，选择“插入”→“表格对象”命令，弹出的下拉菜单如图5-14所示，通过选择菜单中的命令可以在所选择的行的上方或者下方插入行，在所选择的单元格的左侧或者右侧插入列。
图5-13 插入一行 图5-14 下拉菜单 2．添加一列 插入列的方法如下： 1、将鼠标光标定位至任意单元格内，选择“修改”→“表格”→“插入列”命令，或者按下Shift＋Ctrl＋A组合键，即可在该列左侧插入新列。 2、将鼠标光标定位至任意单元格内，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“插入列”命令，即可在该列左侧插入新列，如图5-15所示。 图5-15 添加一列

14 3．添加多行和多列 可以使用以下方法一次添加多行和多列。
1、将鼠标光标移至单元格中，选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，如图5-16所示，设置好后，单击“确定”按钮，即可插入指定数目的行或者列。 2、将鼠标光标移至单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行设置即可。 图5-16 插入行或列

15 5.1.6 合并拆分单元格 4．删除行或列 要删除多余的行或者列，有以下方法：
1、将鼠标光标置于要删除的行或者列的单元格中，选择“修改”→“表格”→“删除行”命令即可删除一行；选择“修改”→“表格”→“删除列”命令即可删除一列。 2、将鼠标光标置于要删除的行或者列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“删除行”命令即可删除行，选择“表格”→“ 删除列”命令即可删除列。 合并拆分单元格 在Dreamweaver 8中，可以将多个连续的单元格合并为一个单元格，也可以把一个单元格拆分为多个单元格，使表格的编辑更加快捷。

16 1．合并单元格 合并单元格有以下方法： 1、选中要合并的所有单元格，选择“修改”→“表格”→“合并单元格”命令，或者按下Ctrl＋Alt＋M组合键，即可将选中的单元格合并为1个单元格，如图5-17 所示。 2、选中要合并的所有单元格，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“合并单元格”命令，即可完成合并。 3、选中要合并的所有单元格，单击“属性”面板上的“合并单元格”按钮 ，即可完成单元格的合并。 图5-17 合并单元格

17 2．拆分单元格 拆分单元格有以下方法： 拆分后的单元格如图5-19所示。
1、将鼠标光标置于要进行拆分的单元格中，选择“修改”→“表格”→ “拆分单元格”命令，或者按下Ctrl＋Alt＋S组合键，弹出“拆分单元格”对话框，选中“列”单选按钮，将把单元格拆分为几列；选中“行”单选按钮，将把单元格拆分为几行，如图5-18所示。 2、在单元格上单击鼠标右键，在弹出的快捷菜单中选择“表格”→“拆分单元格”命令，在弹出的“拆分单元格”对话框中进行设置即可。 3、选中要拆分的单元格，单击“属性”面板上的“拆分单元格”按钮 ，在弹出的“拆分单元格”对话框中进行设置即可。 拆分后的单元格如图5-19所示。 图5-18 “拆分单元格”对话框 图5-19 拆分后的单元格

18 5.1.7 在表格中插入网页元素 在表格中插入网页元素的方法与直接在页面上的其他位置插入并无太大区别，下面分别介绍。 1．在表格中插入文本
在表格中插入网页元素 在表格中插入网页元素的方法与直接在页面上的其他位置插入并无太大区别，下面分别介绍。 1．在表格中插入文本 要在表格中插入文本只需将光标定位至要插入文本的单元格中，然后输入文本或者粘贴文本即可，如图5-20所示。 图5-20 在表格中插入文本

19 2．在表格中插入图片 要在表格中插入图像，首先将鼠标光标定位至要插入图像的单元格中，选择“插入”→“图像”命令，或按Ctrl＋Alt＋I组合键，在弹出的“选择图像源文件”对话框中选择要插入的图像文件即可，如图5-21所示。 图5-21 在表格中插入图片

20 5.2 表格高级应用 嵌套表格 对表格格式化 对表格排序

21 嵌套表格 可以在表格的单元格中插入新的表格，新插入的表格就称为嵌套表格。将鼠标光标定位至要插入嵌套表格的单元格中，选择“插入”→ “表格”命令，弹出“表格”对话框，设置要插入表格的属性，然后插入嵌套表格即可，如图5-22所示。 嵌套表格的数量不宜过多，因为过多的嵌套表格会降低网页的打开速度，一般最多使用3-4层的嵌套。 图5-22 在单元格中插入嵌套表格

22 对表格格式化 在创建表格并在表格中输入数据后，往往需要对表格的外观进行一些设置以取得美观的效果，Dreamweaver 8中带有多种已经定义好的表格样式，使用这些样式可以大大的简化表格的格式化工作，只需挑选出需要的样式套用到表格上就可以了。 套用表格样式的方法如下： 将鼠标光标置于要套用样式的表格的任意一个单元格中，选择“命令”→ “格式化表格”命令，弹出如图5-23所示的“格式化表格”对话框，在对话框中选择所需的样式或者自定义样式即可。 图5-23 “格式化表格”对话框

23 “格式化表格”对话框中的各项属性的功能如下：
1、左上角的列表框中是Dreamweaver 8自带的表格样式。 2、行颜色：设置整行的颜色。 3、第一种：设置表格中的行使用的第一种颜色。 4、第二种：设置表格中的行使用的第二种颜色。 5、交错：设置两种颜色在表格中的显示方式。包括“不要交错”、“每一行”、“每两行”、“每三行”和“每四行”5种方式。 6、第一行：设置第一行的属性。 7、对齐：设置第一行中内容的对齐方式。 8、文字样式：设置第一行中的文本的显示样式。包括“常规”、“粗体”、“斜体”和“加粗斜体”4种显示方式。 9、背景色：设置第一行的背景色。 10、文本颜色：设置第一行的文本颜色。 11、最左列：设置最左列的属性。 12、文字样式：设置最左列单元格中文本的显示样式。 13、边框：设置表格的边框宽度。

24 5.2.3 对表格排序 如为表格套用AltRows：Green&Yellow样式，效果如图5-24所示。
图5-24 套用样式的效果 对表格排序 表格的一个主要用途就是将数据有序的组织起来并显示。 在Dreamweaver 8中，可以方便的按列对表格进行简单的排序，下面来看一个例子。 （1）打开要排序的表格，如图5-25所示。 （2）将鼠标光标定位至任意单元格中，选择 “命令”→“排序表格”命令，弹出“排序表格” 对话框，如图5-26所示。 图5-26 “排序表格”对话框 图5-25 打开表格

25 2、顺序：设置排序的方式，可以选择“按字母排序”或者“按数字排序”的方式，然后在右边的下拉列表框中可以设置升序排列或者降序排列。
（3）对话框中各属性功能如下： 1、排序按：设置排序的依据。 2、顺序：设置排序的方式，可以选择“按字母排序”或者“按数字排序”的方式，然后在右边的下拉列表框中可以设置升序排列或者降序排列。 3、再按：选择一列作为第二排序的依据。 4、顺序：设置第二排序的方式和排序顺序。 5、排序包含第一行：选中此复选框，在排序时将同时将第一行也进行排序。当第一行是标题的时候则不要选择此复选框。 6、排序标题行：排序时包括标题行。 7、排序脚注行：排序时包括脚注行。 8、完成排序后所有行颜色保持不变：排序之后，行的原有属性保持不变。 （4）如设置按列2排序，排序顺序为按数字升序排序，排序后的表格效果如图5-27所示。 图5-27 按列2升序排列后的表格效果