1、第五章 表格,本章主要介绍了表格的一些基本操作。通过本章的学习，可以了解如何创建表格，如何对单元格进行剪切、复制、粘贴、重置大小、合并与拆分以及如何添加和删除行和列，如何设置表格与单元格的属性等。,5.1 创建表格 5.1.1 插入表格在网页中插入表格，通常采用下几种方法：（1）将光标放置在页面需要创建表格的位置，选择菜单“插入”“表格”。如图5-1所示。,图5-1 插入表格,（2）将光标放置在页面需要创建表格的位置，然后单击插入工具栏的普通面板上的表格按钮。如图5-2所示。若普通面板被关闭，则选择菜单“窗口”“插入”，即可出现普通面板。（3）将表格按钮从普通面板拖到页面上所需位置。,图5-2
2、 插入表格,5.1.2 设置表格完成插入表格的操作，即可出现对话框，提示你设置表格的格式，如图5-3所示。,图5-3 插入表格对话框,行数：输入要插入表格的行数。列数：输入要插入表格的列数。单元格填充：输入单元格中内容同单元格内部边界之间的距离值。单元格上、下、左、右边距都等同。,单元格间距：输入单元格与单元格之间的距离值。宽度：输入宽度值，在右侧的下拉列表中，选择宽度单位，可以选择像素，以绝对的像素值来设置表格的宽度，则表格的大小不随浏览器窗口大小改变而改变；选择百分比，设置表格宽度同浏览器宽度的百分比，则表格的宽度将随浏览器窗口宽度而改变。边框：输入边框的宽度。如果不需要显示边框，则输入0
3、。如图5-3设置完毕，单击确定按钮便可创建一个（34）的表格，如图5-4所示。并且此时插入表格对话框中的值将保留作为下一次插入表格时的默认值。,图5-4 （34）的表格,5.2 编辑表格 5.2.1 添加和删除行和列 1.添加行或列在需要添加行的位置单击，选择菜单“修改” “表格”“插入行”命令。或者单击右键，从快捷菜单中选择“表格”“插入行”，则可以在光标当前所在行上面插入一行。在需要添加列的位置单击，选择菜单“修改”“表格”“插入列”。或者单击右键，从快捷菜单中选择“表格”“插入列”，便可以在光标当前所在位置“年龄”左面插入一列。【例5-1】在图5-5所示的表格中第二行上插入一行，第二列后
4、插入一列，具体步骤如下：,图5-5 （43）的表格,单击第二行第三列，即内容为“19”的单元格，将光标放置到此处。选择菜单“修改” “表格”“插入行”命令，即在第二行上插入一行，如图5-6所示。选择菜单“修改”“表格”“插入列”命令，即在第三列前上插入一列，如图5-7所示。,图5-6 插入行,图5-7 插入列,读者亦可选择使用快捷菜单来实现该操作。单击插入单元行的下一行，在弹出的快捷菜单中选择“表格”“插入行”，即可在该行上插入一行；选择“表格”“插入列”，即可在该列左侧插入一列。行和列也可以同时添加。选择菜单“修改”“表格”“插入行或列”。或者单击右键，从快捷菜单中选择“表格”“插入行或列”
5、，在出现的对话框中，输入要添加的行数和列数。如图5-8所示。,图5-8 插入行或列,插入：可选择要插入行还是列。行数：若选择插入行，则输入或选择需要插入的行数；若选择插入列，则输入或选择需要插入的列数。,位置：选择要插入的位置。选择插入行，则选择在当前行之上或在当前行之下插入，然后【确定】就可插入一行或多行；选择插入列，则选择在当前列之前或在当前列之后插入，然后【确定】就可插入一列或多列。注意，一次插入多行和多列，插入的位置可以自由选择。如果在表格最后一行后再添加一行那么只能用“插入行或列”这种方法。也可以在属性面板中直接增加表格的行数和列数。选中整个表格，在属性面板中增加行或列的值就可以添加
6、行或列了，不过添加的位置是固定的，行只能添加在表格底端，列只能添加在表格右端。属性面板如图5-9所示。,图5-9 添加行或列,【例5-2】在上图5-5所示的表格中第四行下插入三行，第三列后插入两列，具体步骤如下：（1）将光标放置到该表格第四行、第三列的单元格中。在插入行或列对话框中先选择插入行，输入插入行数“3”，位置在所选行之下。设置完毕，单击确定，即可完成插入行的操作。（2）在插入行或列对话框中先选择插入列，输入插入列数“2”，位置在当前列之后。设置完毕，单击【确定】，即可完成插入列的操作。（3）也可在如图5-9的属性面板中输入行：7，列：5，也可实现该操作。完成该操作后的表格如图5-10
7、所示。,图5-10 添加行或列,2.删除行或列【例5-3】删除图5-10中的空白行。操作步骤如下：（1）依次单击第5、6、7行，选择选择菜单“修改”“表格”“删除行”，或者单击右键，从快捷菜单中选择“表格”“删除行”。（2）依次单击第4、5列，选择菜单“修改”“表格”“删除列”，或者单击右键，从快捷菜单中选择“表格”“删除列”。（3）也可以在中直接删除表格的行数和列数。选中整个表格，在图5-9所示属性面板中行和列数分别改为4和3。不过用这种方法删除行或列的位置是固定的，删除行时从表格最底端开始，删除列时从表格最右端开始。,5.2.2 拆分和合并单元格将表格中两个或多个单元格合并成一个单元格称作
8、“合并”；将一个单元格分割成两个或多个单元格称作“拆分”。对单元格的拆分与合并可以通过属性面板左下角如图5-11所示的按钮来实现。,图5-11 合并单元格和拆分单元格按钮,1. 拆分单元格【例5-4】将图5-5所示的表格中第二行第一列的单元格拆分为三行，第二行第三列的单元格拆分为三列，具体步骤如下：（1）选中第二行第一列的单元格，单击属性面板上的“拆分单元格”按钮，出现如图5-12所示对话框。,图5-12 拆分单元格（行）,（2）选择把单元格拆分为行，行数则输入该单元格需要拆分为几行，此处输入“3”，单击确定。如图5-13所示。（3）选中第二行第三列的单元格。在拆分单元格面板上， 选择把单元格
9、拆分为列，列数输入该单元格需要拆分为几列，此处输入“3”，如图5-14所示。单击确定。,图5-13 将选中的单元格拆分为三行,图5-14 拆分单元格（列）,拆分完之后，表格如图5-15所示。也可以利用菜单来拆分单元格也可以选择菜单“修改”“表格”“拆分单元格”命令来实现拆分单元格的操作。还可以将光标放置在要拆分单元格中，选择菜单“修改”“表格”“减少行宽”命令，实现将当前单元格拆分为两列；选择“修改”“表格”“减少列宽”命令，实现将当前单元格拆分为两行。,图5-15 将选中的单元格拆分为三列,2.合并单元格选中要合并的相邻单元格，不相邻的单元格不能合并，并且要保证选中的单元格区域呈现矩形。单击
10、属性面板上的“合并单元格”按钮，选中的单元格就被合并，也可以用快捷键+。如果原先单元格中有数据，所有的数据都别依次放入到合并后的单元格中。【例5-5】将图5-16所示的表格中第一列最后两行的单元格合并，具体步骤如下：（1）拖动鼠标选中要合并的两个单元格。（2）单击属性面板上的“合并单元格”按钮，则该两个单元格合并为一个，并且独立单元格中的内容“计0307”被同时放在了合并了的单元格中。,原始表格,图5-16 合并单元格,合并单元格后的表格,也可以通过选择“修改”“表格”“合并单元格”命令来实现合并单元格的操作。还可以利用菜单来合并单元格。将光标放置在要合并单元格区域左上方或上方的第一个单元格中
11、，选择“修改”“表格”“增加行宽”“命令，可以实现当前单元格同下方单元格的合并；选择“修改”“表格”“增加列宽”命令，可以实现当前单元格同右方单元格的合并。,5.2.3 复制、粘贴和删除单元格可以一次对多个单元格进行复制或粘贴操作，可以保留单元格初始格式，复制并粘贴多个单元格，也可以只是复制和粘贴单元格的内容。单元格可以在插入位置被粘贴，也可以替换单元格中被选中的内容。粘贴多个单元格，剪贴板中的内容必须与表格的格式一致。1.复制和粘贴单元格【例5-6】将图5-17所示的表格A中第一行中的两张图片复制到表格B中的第二行中，具体步骤如下：,表格B,图5-17 剪切和复制单元格,表格A,（1）选中表
12、格A中第一行的两个单元格。如果需要复制的单元格为整行或整列，则可将鼠标放在该行左侧或该列上侧，当光标变为黑色箭头状时，点击左键，即可选中该行或该列；若需要复制的单元格不是整行或整列，则先点击鼠标选中第一个单元格，按住键选中第二个单元格，并依次类推，选中所有需要复制的单元格。注意，多个单元格必须组成矩形才能被复制。若选中的单元格不能组成矩形，则出现如图5-18所示的警告对话框：,图5-18 警告对话框,（2）选择菜单“编辑”“拷贝”命令，或者按Ctrl+C组合键，或者单击右键，选择快捷菜单中的“拷贝”命令，即可将选中的单元格复制到剪贴板上。（3）选择要粘贴单元格的位置，即表格B的第二行。注意，如
13、果在某个单元格内粘贴单元格内容，则单击该单元格，将光标放置在该单元格内；若要以粘贴单元格来创建新的表格，单击要放置新表格的位置。（4）选择菜单“编辑”“粘贴”命令，或者按Ctrl+V组合键，或者单击右键，选择快捷菜单中的“粘贴”命令。完成以上操作之后表格B如图5-19所示。,图5-19 完成复制之后的表格B,在复制、粘贴单元格的操作中，通常有以下三种情况。如果将整行或整列粘贴到现有的表格中，所粘贴的行或列被添加到该表格中，如上例5-6。如果粘贴某些或某个单元格，只要剪贴板中的内容与选定单元格格式兼容，选定单元格的内容将被替换。如图5-20。将左边表格中的第一列第一行和第二行的内容复制到右边表格
14、中的第一列。,图5-20 粘贴单元格,如果在表格外粘贴，则会自动生成一个新的表格，其中行或列的内容保持不变。如图5-21所示。,图5-21 在表格之外粘贴单元格,粘贴时，如果剪贴板中的内容与选定单元格的格式不一致,如图5-22，则会弹出如图5-23所示警告信息，提示不能完成粘贴操作。,图5-22 选中的单元格格式不一致,图5-23 警告信息,2.删除单元格【例5-7】将图5-19所示的表格中的第一列第二行与第二列第一行的单元格的内容删除，具体操作如下：（1）选中表格A中的第一列第二行与第二列第一行的单元格。（2）选择菜单“编辑”“清除”命令，或是按Delete键。完成以上操作之后表格A如图5-
15、24所示。注意，如果选中了整行或整列，执行上述操作，则会将整行删除。,图5-24 删除单元格,5.3 格式化表格 5.3.1 设置表格格式对表格的格式化操作，可以通过属性面板完成。选中整张表格，属性面板如图5-25（A、B）所示。Dreamweaver 中的属性面板可以收放，点击右下角的按钮或可以收放面板。,图5-25 A 选中整张表格时的属性面板A（折叠时）,图5-25 B 选中整张表格时的属性面板B（展开时）,1.设置表格名称在属性面板左方的第一个文本框，即表格 Id（表格名称）文本框中，可以输入表格的名称。例如果该表格为一个课程表，则Id中输入“课程表”。2.设置表格整体格式行、列：设置
16、表格的行数和列数。宽、高：设置表格的宽度值和高度值。右侧的下拉列表框中，可以选择数值的单位。采用像素设置表格的宽度值和高度值，则表格的大小不随浏览器窗口的变化而变化。选择“%”（表示表格宽度或高度同浏览器窗口的宽度或高度成百分比），则表格大小随浏览器窗口变化而变化。通过选中表格，拖动表格边框上出现的控点，也可以改变表格的宽度和高度。且按住Shift键，拖动表格边框上的控点则可以保持表格的长宽比。对齐：设置表格在浏览器窗口水平方向上的对齐方式。,3.设置表格中单元格格式填充：设置单元格中内容同单元格内部边界之间的距离，单位为像素。间距：设置单元格与单元格之间的距离，单位为像素。如果这两项都未设置
17、，则浏览器将单元格内部边距设置为1，而将单元格间距设置为2。4.设置表格的边框格式边框：设置表格的边框宽度，单位为像素。如果将边框宽度设置为0，则不显示边框。为了操作方便，默认状态下，在编辑窗口中表格边框用虚线显示，如图5-26所示。也可以自行设置是否显示表格虚拟边框，选择菜单“查看”“可视化助理”“表格边框”。边框颜色：设置整个边框的颜色。,图5-26 显示表格虚拟边框,5.设置表格的背景背景图像：设置表格的背景图像。输入背景图像的URL地址，或者点击后面的文件夹图标，打开选择图像源对话框，如图5-27，选择背景图像。,图5-27 选择图像源,背景颜色：在该颜色井中，可以设置表格的背景颜色，
18、如图5-28所示。,图5-28 颜色井,6.清除表格的行高和列宽在属性面板右下角有如图5-29所示的按钮，利用“清除行高”和“清除列宽”按钮，可以清除表格中的行高和列宽数值，从而使表格恢复为最原始的状态。,图5-29 清除行高和列宽按钮,单击“清除行高”按钮，可以清除表格中所有的行高值，包括为表格设置的行高值，为单元格设置的行高值等。单击“清除列宽”按钮，可以清除表格中所有的列宽值，包括为表格设置的列宽值，为单元格设置的列宽值等。如果表格中有内容，则表格的宽度和高度将调整为正好能够容纳其中的内容的大小。图5-30显示了清除行高和清除列宽的情形。还有一种方法完成清除表格的行高和列宽，选中表格，选
19、择菜单“修改”“表格”“清除单元格高度”或者“清楚单元格宽度”命令即可。,图5-30 清除行高和列宽,7.转换表格的宽度和高度表格的宽度和高度都有两种设置方式，一种是设置绝对的像素值，这时表格的宽度或高度不随浏览器窗口的变化而变化；另一种是设置百分比数值，这时表格的宽度或高度与浏览器窗口大小成百分比，将随浏览器窗口大小变化而变化。这两种方法各有优缺点，使用表格的绝对宽度或高度， 能够准确地保持单元格中数据的格式和位置，但是如果浏览器的窗口过小，则需要拖动浏览器的滚动条浏览表格，这不便于对表格的整体观察；而使用表格的相对宽度和高度，则能够保持在浏览器窗口中看到整个表格，但是随着浏览器窗口的变化，
20、可能表格中内容的格式和位置也会发生变化，这在很多时候不利于对数据的查看。,【例5-8】设置一个如图5-31所示的课程表。则属性面板设置如图5-32所示。,图5-31 （56）的表格,图5-32 属性面板的设置,5.3.2 设置行、列和单元格的格式对表格行、列和单元格的格式，也通过首先选中相应的表格元素，然后在属性面板上设置数据来完成。选中表格中所需要设置的行、列或单元格后，属性面板如图5-33所示。属性面板的上半部分，会根据表格单元格中包含对象的不同而不同，而下半部分却是对表格行、列和单元格的设置区,图5-33 设置表格行、列和单元格格式时的属性面板,1.设置行、列或单元格中内容的对齐方式水平
21、：设置单元格内容在水平方向上相对单元格的对齐方式。可以从下拉列表中选择默认（通常是普通单元格左对齐，标题单元格居中对齐）、左对齐、居中对齐、右对齐。垂直：设置单元格内容在垂直方向上相对单元格的对齐方式。可以从下拉列表中选择默认（通常为中间对齐）、顶端、中间、底部、基线。 2.设置行、列或单元格的宽度和高度宽：在该文本框中，输入单元格的宽度值，可以是具体数字，表示为像素值；也可以输入百分数，如50%，表示单元格宽度为表格宽度的50%。高：在该文本框中，输入单元格的高度值，可以是具体数字，表示为像素值；也可以输入百分数，如30%，表示单元格高度为整个表格高度的30%。,另外还可以通过鼠标拖动边框来
22、改变表格的行高和列宽。要改变行高，将鼠标移动到该行下方的边框上，当鼠标变为双箭头形状时拖动鼠标，将边框拖到需要的位置，释放鼠标，表格行高即被改变。要改变列宽，将鼠标移动到该列右方的边框上，当鼠标变为双箭头形状时拖动鼠标，将边框拖到需要的位置，释放鼠标，表格列宽即被改变。 3.设置行、列或单元格的边框格式边框：设置被选中的行、列或单元格的边框颜色。 4.设置行、列或单元格的背景背景：在该本框中输入单元格的背景图像文件的URL地址。或者打开后面的文件夹，选择背景图像。背景颜色：在颜色井中选择单元格的背景颜色。,5.控制单元格中内容的换行方式不换行：如果选中该复选框，在单元格中输入文本时，如果文本长
23、度超过了单元格的宽度，则文本会自动换行，并且单元格的宽度保持不变。清除该复选框，在单元格中输入文本时，如果文本长度超过了单元格的宽度，则文本不自动换行，单元格的宽度将随之变宽。图5-34显示了单元格中输入文字过长时，不自动换行和自动换行的两种效果。,不自动换行,自动换行,图5-34 文字的不自动换行和自动换行,6.设置标题单元格标题：选中该复选框，则将所有选中的单元格设置为标题单元格；取消该复选框，则将所有选中的单元格设置为数据单元格。通常将表格的第一行和第一列中的单元格设置为标题单元格。如图5-35所示，一般对于标题单元格，其内容都被加粗居中显示。,选中第一行和第一列,设置标题单元格,图5-
24、35 设置标题单元格,5.3.3 套用现有单元格的格式除了上述介绍的手动设置表格和表格中各元素的格式外，Dreamweaver也提供了十几种表格设计风格，使用这些预置设计风格格式化表格，可以大大提高表格的设计效率。具体步骤如下：,图5-36 格式化表格对话框,（ 1）选中需要格式化的表格，然后选择菜单“命令”“格式化表格”。（2）在弹出的格式化表格对话框中， 左上角的列表中显示各种设计方案，选择一种，右边就显示设计示例。如图5-36所示。,行颜色：第一种：设定第一种颜色。第二种：设定第二种颜色。 交错：设置表格行与行的颜色是否变化。：每行的背景颜色不改变 每一行：每隔一行颜色发生变化 每两行：
25、每隔两行颜色发生变化 每三行：每隔三行颜色发生变化 每四行：每隔四行颜色发生变化 第一行：设置第一行的参数。 对齐方式：无、左对齐、居中、右对齐。 文字样式：常规、粗体、斜体、加粗斜体。 背景色：输入十六进制颜色代码。 文本颜色：输入十六进制颜色代码。 最左列：对齐方式和文字样式与第一行的设置一样。,表格：边框：修改边框宽度，在边框域中输入一个值，如果不需要显示表格边框，则输入0即可。将所有属性套用至TD标注而不是TR标签选项：要将设计应用于表格单元（TD）标记而不是表格行（TR）标记，虽然应用于表格单元的格式优先于应用于表格行的格式，但是应用于表格行的格式将产生更清晰、更简洁的HTML源代码。单击【应用】或【确定】按钮即可对表格应用选定的设置。如图5-37所示。（选项设置见图5-36所示）。,图5-37 套用格式,图5-45 实例表格,三、 操作题新建一个文档，然后在该文档创建一个56的表格，如图5-45所示。将内容相同的相邻单元格合并，并将第一行及第一列设置为标题单元格。,
