《表格网页制作.pptx》由会员分享，可在线阅读，更多相关《表格网页制作.pptx（84页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1图7.1第1页/共84页2插入表格【例7.1】插入表格 将插入点放置到文档中要插入表格的地方。执行Insert|Table（插入|表格）命令，或单击普通对象面板上的Insert Table按钮（见图7.2）。如果没有预先设置插入点的位置，可以直接从对象面板中将该按钮拖动到文档中需要插入表格的位置，打开如图7.3所示的对话框，提示确定表格的格式。在Rows（行）文本框中，输入要插入表格的行数。在Columns（列）文本框中，输入要插入表格的列数。在Cell Padding文本框中，输入单元格中对象同单元格内部边界之间的距离，单位为像素点。第2页/共84页3图7.2第3页/共84页4图7.3第4
2、页/共84页5在Cell Spacing文本框中，输入单元格之间的距离值，单位为像素点。在Width文本框中输入表格宽度值，单位可以在右方的下拉列表中选择。Pixel（像素），以绝对的像素值来设置表格宽度；Percent（百分比），设置表格宽度同浏览器窗口宽度的百分比。在Border（边框）文本框中，输入边框的宽度，单位为像素点，0表示无边框。设置完毕，单击OK按钮，确定操作。一个表格就会出现在文档中，如图7.4所示。在表格中添加内容表格的内容要添加到表格的单元格中。单元格中可以插入任何类型的数据，例如文本、图像、表单甚至表格等。同时也可以按照通常的编辑页面元素的方法，编辑其中的内容。例如，可
3、以编辑其中的文本，也可以设置其中的文本格式。第5页/共84页6图7.4第6页/共84页7单击要插入内容的单元格，可以直接插入、编辑文本，也可插入图像、导航条、表单等页面元素，方法同不在表格中的方法完全相同。在一个单元格中输入完毕，按Tab键，可以将插入点移动到下一个单元格中，以便继续输入。如果在当前行的最后一个单元格中按Tab键，则将插入点移动到下一行中的第一个单元格内。按Shift+Tab键可将插入点移动到上一个单元格。在当前行的第一个单元格中按Shift+Tab键，则将插入移到上一行中的最后一个单元格内。当然，也可直接用鼠标单击需要输入文本的单元格，直接将插入点转移到该单元格中。图7.5是
4、在表格中插入的文本和图像。第7页/共84页8图7.5第8页/共84页9利用文本文件创建表格如果已有一些数据在Microsoft Excel 的工作表中，或在Microsoft Access 的数据库中，或在其他形式的文件系统中，如果在HTML文件中重新输入这些数据，就会显得非常麻烦，如果数据量很大，也就不大现实。在Dreamweaver中，允许导入其他类型文档中的数据，从而避免了再次输入数据的麻烦。1.生成分隔符类型的文本数据文件在Dreamweaver中，如果要导入表格数据，必须首先将数据存储为以某种分隔符作数据间隔的纯文本文件，图7.6、图7.7所示分别是以Tab和逗号作分隔符的数据文件格
5、式。这种格式文件可以使用相应软件的存储工具生成，如Microsoft Excel 中的“文件|另存为”命令等，也可以手工编辑。第9页/共84页10图7.6第10页/共84页11图7.7第11页/共84页12注意：文件中的一行相当于表格的一行，一行中的各列数据间用Tab空格或逗号隔开，在这样的文件中，数据不像表格中的数据排得那样整齐。2.从格式化文本数据文件中导入表格数据【例7.2】利用格式化文本创建表格 执行File|Import（文件|导入）命令，再选择Import Table Data（导入表格数据）；或执行Insert|Tabular Data（插入|表格数据）；也可以直接单击对象面板上
6、的Insert Tabular Data（插入表格数据）按钮(图7.8)。打开Insert Tabular Data（插入表格数据）对话框（图7.9），提示选择数据文件及格式。第12页/共84页13图7.8第13页/共84页14图7.9第14页/共84页15 在Data File（数据文件）文本框中，输入含有分隔符的数据文件的路径和名称，也可以单击Browse（浏览）按钮，从磁盘上选择数据文件。在Delimiter（分隔符）下拉列表中，选择文本数据文件中所采用的分隔符。例如，如果数据文件采用制表符作为分隔符，则应该选择Tab（制表符）；如果数据文件中使用逗号作为分隔符，则可以选择Comma（逗
7、号）。其中分隔符种类有以下几种：Tab（制表符）、Comma（逗号）、Semicolon（分号）、Colon（冒号）、Other（其他）。如果在Delimiter（分隔符）下拉列表中没有合适的分隔符号，则可以选择Other，然后在右方的文本框中手工输入需要的分隔符。第15页/共84页16在Table Width（表格宽度）区域进行表格宽度的设置。选择Fit To Data（配合数据）单选按钮，则创建的表格中，每个表格列的宽度根据数据的长度而定，使之刚好能够容纳最长的数据。选择Set（设置）单选按钮，则可以自行指定表格的列宽，在右方的文本框中输入列宽数值，在下拉列表中选择宽度单位。在Cell P
8、adding（单元格内边空）文本框中，输入单元格中对象同单元格内部边界之间的距离。在Cell Spacing（单元格间距）文本框中，输入单元格之间的距离。在Format Top Row（格式化顶行）下拉列表中，可以设置表格顶行的文字格式。这可以使表格列所表述的主题更加清晰，相当于将表头突出显示。其中的选择有：No Formatting（不格式化）、Bold（加粗）、Italic（倾斜）、Bold Italic（加粗倾斜）。在Border文本框中，可以输入表格边框的宽度。第16页/共84页17 设置完毕，单击OK按钮，确定操作。这时数据源文件中的数据就被导入到文档中，同时创建了相应的表格。图7.
9、10就是导入图7.6的数据生成的表格。3.导出表格数据执行File|Export|Export Table（文件|导出|导出表格）命令可以将网页中的表格数据导出到文本文件中，供其他软件使用。参数设置与导入表格类似。第17页/共84页18图7.10第18页/共84页197.2 编辑表格选中表格元素1.选中整张表格要选中整张表格，有6种方法：将鼠标移动到表格的左上角位置，或是表格上边框或下边框外附近的任意位置，当鼠标光标呈现一个交叉十字的形状时单击鼠标，即可选中表格，如图7.11所示。将鼠标移动到表格左方边框之外的区域，当鼠标指针变为指向右上方的箭头 形状时，单击鼠标，即可选中整张表格。单击表格中
10、任意位置，然后执行Modify|Table|Select Table（修改|表格|选择表格）命令，这时整张表格被选中。第19页/共84页20图7.11第20页/共84页21 单击表格中任意位置，执行Edit|Select All（编辑|全选）命令，或是按Ctrl+A键。单击表格中的任意位置，然后在文档窗口左下方状态行上标记选择器中单击标记。按住Shift键，然后单击表格中的任意位置。当表格被选中时，其周围出现一个边框，表明被选中，同时在边框的右方和下方带有黑色控制柄。通过拖动这些黑色控点，可以改变表格的大小。2.选择表格行要选中表格行，可以使用以下几种方法。将鼠标移动到要选中表格行左方表格之外
11、的位置，当鼠标指针变为一个指向右方的黑色箭头形状时单击鼠标，即可选中相应的表格行，如图7.12所示。这时按下鼠标上下拖动，可以选中多行。第21页/共84页22图7.11第22页/共84页23图7.12第23页/共84页24 单击要选择的表格行中的第一个单元格，然后按住鼠标左键，拖动鼠标，直到要选择的表格行中最后一个单元格中，释放鼠标，即可选中表格行。同样，拖动鼠标，移过多个表格行，即可选中多个表格行。单击要选择的表格行中任意一个单元格，然后在文档窗口左下方状态行上单击标记，即可选中该表格行，当表格行被选中时，该行中所有的单元格四周都带有黑色粗框。3.选择表格列要选中表格列，有如下方法：将鼠标移
12、动到要选中表格列上方表格之外的位置，当鼠标光标指针变为一个指向下方的黑色箭头形状时单击鼠标，即可选中相应的表格列；这时按下鼠标左右拖动，可以选中多列，如图7.13所示。第24页/共84页25图7.13第25页/共84页26 单击要选择表格列中的第一个单元格，然后按住鼠标左键，拖动鼠标，直到要选择表格列中最后一个单元格中，再释放鼠标，即可选中表格列。同样，拖动鼠标，移过多个表格列，即可选中多个表格列。4.选中单元格在Dreamweaver中，可以选中相邻的单元格，也可以选中不相邻的单元格。选择一个单元格。在要选择的单元格中单击鼠标，然后拖动到相邻单元格（左、右、上、下以及斜线方向皆可）中部，当要
13、选中单元格四周带有粗框时释放鼠标。另一种方法是在要选中的单元格中单击鼠标，然后在文档窗口左下方状态行上的标记选择器中，单击或标记。被选中的单元格四周会出现粗框。第26页/共84页27 选中相邻多个单元格。在相邻单元格中的第一个单元格中按下鼠标，拖动鼠标（可以横向、纵向、斜线拖动），移动到最后一个单元格中，即可选中一组相邻单元格。选中不相邻的多个单元格。按住Ctrl键，单击要选中的单元格，则被单击的单元格就会被选中。5.取消选中状态选中表格元素后，如果希望取消选择状态，只要单击任何单元格，就会取消对表格元素的选中状态。也可以通过单击表格之外的其他任意位置来取消对表格元素的选择。第27页/共84页
14、28插入行或列最初插入表格的行数或列数不够时，可以插入行或列，这些操作都可以在Modify|Table菜单中实现（见图7.14）。1.插入一行执行Modify|Table|Insert Row（修改|表格|插入行）命令，或按Ctrl+M键，就会在原先单元格的上方，插入一个新空白行。2.插入一列执行Modify|Table|Insert Column（修改|表格|插入列）命令，在原单元格的左方插入一列。3.插入多行或多列 执行Modify|Table|Insert Rows or Columns（插入行或列）命令,打开Insert Rows or Columns（插入行或列）对话框（图7.15）
15、，提示输入要添加的行数、列数和位置。第28页/共84页29图7.14第29页/共84页30图7.15第30页/共84页31 要插入行，可以选择Rows；要插入列，可以选择Columns。如果插入行，则在Number of Rows（行数）数值框中输入要添加的行数；如果插入列，则在Number of Columns（列数）数值框中输入要添加的列数。在Where（哪里）区域，设置新插入行或列的位置。对于插入行，可以选择Above the Selection（选中项之上）或Below the Selection（选中项之下）；对于插入列，可以选择Before current Column（当前列之前
16、）或After current Column（当前列之后）。提示：要在表格的最下边或右边增加行或列，可以使用表格属性面操作。选中整个表格；在表格属性面板（图7.16）的Rows或Cols文本框中，输入需要的整个表格的行数或列数，即可实现对表格行和列的增删操作。第31页/共84页32图7.16第32页/共84页33删除行或列对于多余的行或列，可以从表格中删除。1.删除行选中要删除的行，然后执行Modify|Table|Delete Row（删除行）命令，或是按下Del键，或执行Edit|Cut命令，即可删除该行。2.删除列选中要删除的列，再执行Modify|Table|Delete Column
17、（删除列）命令，或按Del键，或执行Edit|Cut命令，即可删除该列。3.删除表格选中要删除的表格，按Del键，或执行Edit|Cut命令，即可删除表格。第33页/共84页34合并与拆分单元格合并单元格指将两个或多个相邻单元格合并成一个单元格，拆分单元格指将一个单元格分成多个单元格。设初始表格如图7.10所示。【例7.3】合并单元格 选中要合并的两个或多个单元格（见图7.17）。执行Modify|Table|Merge Cells（合并单元格）命令，或单击属性面板Merge Selected Cells Using Spans(使用跨度合并选中单元格)按钮（见图7.18），图7.19是合并后
18、的效果。第34页/共84页35图7.17第35页/共84页36图7.18第36页/共84页37图7.19第37页/共84页38【例7.4】拆分单元格 选中要拆分的一个单元格（图7.20），或将插入点放入要拆分的单元格中。执行Modify|Table|Split Cells（拆分单元格）命令，或单击属性面板Splits Cell Into Rows or Columns(将单元格拆分为行或列)按钮（见图7.18），打开Split Cell（拆分单元格）对话框(图7.21)。在Split Cell中选择拆分为Rows(行）还是拆分为Columns(列）。如果拆分为行，则在下面的Number of
19、Rows（行数）文本框中输入插分的行数。如果拆分为列，则在下面的Number of Columns（列数）文本框中输入插分的列数。第38页/共84页39图7.20第39页/共84页40图7.21第40页/共84页41 设置完成，单击OK确认操作，效果见图7.22。合并和拆分单元格在需要将表格中的数据分成几类时非常有用。编辑单元格在表格操作时，有时需要复制多个单元格并保留原先的格式。将单元格内容的复制、剪切、粘贴等操作称为编辑单元格。1.复制或剪切单元格 选中要复制或剪切的一个或多个单元格，并保证选中的单元格区域呈现矩形。执行Edit|Copy命令，或按Ctrl+C键，即可将选中的单元格复制到剪
20、贴板上；执行Edit|Cut命令，或按Ctrl+X键，即可将选中的单元格剪切到剪贴板上。第41页/共84页42图7.22第42页/共84页432.粘贴单元格 选择要粘贴数据的目标对象。如果希望将数据粘贴入单元格内，可以单击该单元格，将插入点放入该单元格内；如果希望将剪贴板中的数据粘贴为一个新的表格，可以在文档中将插入点放置到该位置上。执行Edit|Paste命令，或按Ctrl+V键。在粘贴剪贴板中的单元格时，如果将完整的行和列数据粘贴入现有的表格中，则行和列数据会自动插入到表格中的相应位置上。如果将数据粘贴入一个单独的单元格中，则相应单元格区域中的内容会被替换。如果在表格之外的文档位置上粘贴表
21、格，则会自动生成一个新的表格，并填入相应的行和列数据，图7.23、图7.24和图7.25分别是剪切、在表格内粘贴和在表格外粘贴单元格的效果。第43页/共84页44图7.23第44页/共84页45图7.24第45页/共84页46图7.25第46页/共84页47提示：可以将一个表格中的单元格粘贴到另一个表格中。3.删除单元格内容要删除选中单元格中的内容只需选中要删除其中内容的单元格，然后执行Edit|Clear命令，或是按下Del键。注意：如果选中的是整行或整列，则上述操作会删除表格的行或列。表格排序表格作为处理数据的常见形式，经常需要对其中的内容进行排序。【例7.5】表格排序 选中表格。第47页
22、/共84页48 执行Commands|Sort Table（命令|排序表格）命令（图7.26），打开Sort Table（排序表格）对话框（图7.27）。在Soft By（排序依据）下拉列表中，选择以哪一列作为排序依据。在Order（顺序）下拉列表中，可以设置排序的顺序。Alphabetically（字母），则以字母顺序排序，Numerically，则以数字大小排序。在右方的下拉列表中，可以进一步指定排序方向。Ascending（升序），则从字母A 至Z，从数字0至9，按升序排序。Descending（降序），则从字母Z 至A，从数字9至0，按降序排序。第48页/共84页49图7.26第49页
23、/共84页50图7.27第50页/共84页51 在Then By（其他排序依据）下拉列表中，可以选择以哪一列作为第二排序依据。同样，可以在Order区域设置排序顺序和排序方向。如果选中Soft Includes First Row（排序时包括首行）复选框，则在对表格数据排序时，同时也对首行进行排序；有时候表格的首行都是标题单元格（也即表格的首行作为表头），则可以清除该复选框。如果选中Keep TR Attribute With Sorted Row（保留排序行的TR属性）复选框，则在对表格排序后保留排序行中标记的原有属性。设置完毕，单击OK按钮，确定操作，表格即被排序（见图7.28）。注意：如
24、果表格中包含Rowspan 或Colspan 属性，即使用了合并单元格或拆分单元格，则无法对之进行排序。这时如果确实需要拆分或合并单元格，可以先排序后拆分或合并。第51页/共84页52图7.28第52页/共84页537.3 表格的格式化设置表格的整体格式对表格的格式化操作，主要可以通过表格属性面板来完成。选中整张表格，这时的属性面板如图7.29所示。1.设置表格名称Table Name（表格名称）：在属性面板左方的第一个文本框，也即Table Name文本框中，可以设置表格的名称。为表格命名，便于页面描述语言JavaScript等对表格的操作。2.设置表格的行数和列数Rows（行）：在该文本框
25、中，可以设置表格的行数。Cols（列）：在该文本框中，可以设置表格的列数。第53页/共84页54图7.29第54页/共84页55注意：行数和列数的设置可以增加或删除行和列。数值大于原值会增加行列，数值小于原值则删除行列。3.设置表格的高度和宽度W（宽度）：在该文本框中，可以输入表格的宽度数值，在右边的下拉列表框中，可以选择数值的单位。Pixel表示宽度是像素值，这时表格的宽度是绝对宽度，不随浏览器窗口的变化而变化。选择“%”，则表明表格的宽度是表格宽度相对于浏览器窗口宽度的百分比数值，这时表格宽度将随浏览器窗口的宽度变化而变化。H（高度）：在该文本框中，可以输入表格的高度数值，在右边的下拉列表
26、框中，可以选择数值的单位，但一般来说，不需要设置表格的高度值。提示：选中表格，拖动表格边框上出现的控制，也可以改变表格的宽度和高度。如果希望在拖动鼠标时保持表格的长宽比，可以按住Shift键再拖动表格边框上的控制点。第55页/共84页564.表格的对齐方式Align（对齐）：在该下拉列表框中，可以设置整张表格在浏览器窗口水平方向上的对齐方式。选择Left，表明表格同浏览器窗口在水平方向上左端对齐，Center，表示居中对齐，Right表示右对齐，Default，则采用浏览器指定的默认表格对齐方式，通常是左对齐。图7.30是表格的3种对齐方式。5.设置内部边距和单元格间距Cellpad（单元格内
27、部边距）：该文本框设置表格内部内容同单元格内部边界之间的距离，单位是像素。Cellspace（单元格间距）：该文本框用于设置表格中单元格之间的距离，单位是像素。默认情况下大多数浏览器将单元格内部边距设置为1，而将单元格间距设置为2。第56页/共84页57图7.30第57页/共84页586.设置表格的边框格式Border（边框）：在该文本框中，可以设置表格的边框宽度值，其单位是像素。Brdr Color（边框颜色）：这是一个颜色框，可以设置整个边框的颜色,包括单元格边框。提示：在HTML中，还可以设置边框架颜色的另外两个属性，即亮边框（Bordercolorlight）和暗边框(Borderco
28、lordark)，一般情况下,表格的左边框和上边框可以用加亮的颜色显示,右边框和下边框可以用较暗的颜色显示，整个边框呈立体感，Bordercolorlight设置表格左边和上边的边框,Bordercolordark设置表格右边和下边的边框。例如,下列语句定义了表格的亮边框为亮红色,暗边框颜色为暗红色。第58页/共84页59注意：表格边框设置的是整个表格四周的边框宽度，而不是各个单元格的边框宽度，但border=0时，整个表格都没有表格线，图7.31是border=20,Cell padding=2,Cell Space=3时的表格边框,图7.32是border=0时的表格边框。7.设置表格背景
29、Bg Color（背景颜色）:这是一个颜色框,可以设置表格的背景颜色。可以单击颜色按钮选择颜色,也可以直接在颜色框中输入颜色的十六进制数值。Bg Image(背景图像):在该文本框中，可以设置表格的背景图像。可以直接输入图像文件的URL地址，也可以单击右方的文件夹按钮，从磁盘上选择图像文件。如果同时设置背景颜色和背景图像,则显示的是背景图像。使用这两个属性,可以设置与页面不同的表格背景。第59页/共84页60图7.31第60页/共84页61图7.32第61页/共84页628.清除表格的行高和列宽在表格的修改过程中,有时已经修改了表格的某些行的高度和列的宽度,但又觉得并不合适,这时可以使用清除表
30、格的行高和列宽功能，清除表格中的行高和列宽数值。使表格恢复为最原始的状态。如果表格中有内容，则表格的宽度和高度将调整为正好容纳其中的内容。Clear Row Heights（清除行高）按钮：可以清除表格中所有的行高值，包括为表格和单元格设置的行高值等。Clear Column Widths（清除列宽）按钮：可以清除表格中所有的列宽值，包括为表格和单元格设置的列宽值等。第62页/共84页63提示：选中表格，执行Modify|Table|Clear Cell Heights（清除单元格行高）命令，也可以完成清除表格行高的操作。执行Modify|Table|Clear Cell Widths（改变单
31、元格列宽）命令，可以完成清除表格列宽的操作。9.转换表格的宽度表格宽度的度量有两种方式，一种是绝对的像素值，这时表格的宽度不随浏览器窗口的变化而变化；另一种是百分比数值，这时表格的宽度随浏览器的窗口变化而变化。这两种方法各有其优缺点。使用绝对宽度，能够准确地保持单元格中数据的格式和位置，但是如果浏览器窗口过小，则需要拖动浏览器的水平滚动条浏览表格，这不便于对表格整体的观察。而使用相对宽度，则能够保持在浏览器窗口中看到整个表格行，但是随着浏览器窗口的变化，表格中内容的格式和位置可能也会发生变化，这在很多时候不利于对数据的查看。第63页/共84页64在Dreamweaver中，提供了将表格的宽度数
32、值在像素和百分比之间进行转换的功能，根据需要，随时将表格的宽度设置为需要的度量方式。这种转换用属性面板上的Convert Table Widths to Pixels(将表格宽度转换为像素)和Convert Table Widths to%(将表格宽度转换为百分比)来完成。设置行、列和单元格的格式行、列、单元的格式化指设置单元格的高度、宽度、单元格内部内容的对齐方式等。设置表格的行、列和单元格的格式，首先要选中相应的表格元素，然后在属性面板上设置相应属性的值。请注意，选中单元格和选中表格时的属性面板是不一样的（见图7.33），但选中的是行、表格列还是单元格时属性面板的内容都是一样的。因为行、列
33、也不过是多个单元格的集合而已。第64页/共84页65图7.33第65页/共84页661.设置内容对齐方式Horz（水平）：该下拉列表用于设置一个或多个单元格内容在水平方向上相对单元格的对齐方式。有4种选择，即Left（居左）、Center（居中）、Right（居右）、Default（默认）。Default采用浏览器指定的水平对齐方式，通常是左对齐方式。在HTML中，水平对齐方式由标记的Align属性设置，当选择Default时，实际上就是删除Align属性，即取消水平对齐方式的设置。Vert（垂直）：在该下拉列表中，可以设置单元格内容在垂直方向上相对单元格的对齐方式。有5种选择，即Top（顶部
34、）、Middle（居中）、Bottom（底端）、Baseline（基线）、Default（默认）。选择Default，则采用浏览器指定的默认垂直对齐方式，通常是居中对齐方式，这时也相当于在HTML中删除垂直对齐方式的属性Valign，即取消垂直对齐方式的设置。第66页/共84页67注意：水平对齐和垂直对齐的意义和效果与在文本和图像中的对齐是一样的；单元格的对齐效果可以通过属性面板上部的文本对齐方式按钮 实现，但它们的本质是不同的，单元格对齐方式设置的是标记的align属性和valign属性，它影响所设置的整个单元格；而文本对齐设置的是段落属性，它只影响所设置的一个或多个段落，如果两者都设置，则
35、段落属性优先。2.设置单元格的宽度和高度在表格中，一行中的所有单元格的高度是一样的，一列中的所有单元格的宽度也是一样的。所以，单元格的高度就是相应行的高度，单元格的宽度就是相应列的宽度。第67页/共84页68W（宽度）：该文本框设置单元格宽度值，如果输入数值，则表示是像素值；如果输入带有百分号的数字，如“40%”，则表示单元格宽度相对于整张表格宽度的百分比，但该值的设置一般不影响整个表格的宽度。H（高度）：该文本框用来设置单元格的高度。输入数字，表示像素值；输入带有百分号的数字，如“10%”，表示单元格高度相对于整张表格高度的百分比。注意：如果在一行中设置了多个单元格的高度，则行高以最高的设置
36、为准，列宽也是一样，所以，设置时最好按行或列设置高度和宽度。用鼠标拖动的方法改变表格的行高和列宽更为方便。将鼠标移动到某行下方的边框上，当鼠标变为上下双箭头形状时拖动鼠标，即可以改变行高。将鼠标移动到某列右方的边框上，当鼠标变为左右双箭头形状时拖动鼠标，即可以改变列宽(见图7.34)。第68页/共84页69图7.34第69页/共84页703.设置单元格的边框颜色和背景单元格的边框颜色和背景是指定单元格四周的边框颜色和局部背景颜色，不是整个表格的边框和背景，也不是所有单元格的边框架和背景。通过单元格边框颜色和背景的设置，可以使不同的区域有不同的边框颜色和背景。如果设置的单元格边框颜色与背景颜色相
37、同，可以实现局部无线表格的效果（见图7.35）。Brdr（边框颜色）：设置选中行、列或单元格的边框颜色。可以单击颜色按钮选择需要的颜色，也可以直接在颜色框中输入颜色的十六进制数值。第70页/共84页71图7.35第71页/共84页72Bg（背景）：上面一个Bg文本框用来设置单元格的背景图像。可以在该文本框中输入图像文件的URL地址，也可以单击右方的文件夹按钮，从磁盘上选择图像文件下面的Bg（背景）颜色框可以设置单元格的背景颜色。可以单击颜色按钮选择颜色，也可以在颜色框中输入颜色的十六进制数值。注意：单元格的边框颜色和背景颜色设置的是选中单元格的局部边框和背景颜色，对未设置的单元格，使用的是表格
38、的相应属性值。4.控制单元格内容的换行方式由于表格单元格的区域受到限制，在显示长文本时如何换行就显得比较重要。No Warp（不换行）：如果不选中该复选框，则在单元格中输入文本时，长度超出了单元格的宽度，文本会自动换行，单元格的高度增加，宽度保持不变。反之，如果选中该复选框，则在单元格中输入文本时，文本长度超出了单元格的宽度，文本不自动换行，单元格的宽度将随之变宽。第72页/共84页735.设置标题单元格在表格的设计和制作中，为了清晰地表示表格各行和各列的意思，通常用一些醒目的字体或颜色显示，这可使用单元格内容的格式化操作来实现，也可使用表格中的标题标记来实现。Header（标题）：如果选中该
39、复选框，则将所有选中的单元格设置为标题单元格，通常为字体加黑显示；如果不选中该复选框，则将所有选中的单元格设置为数据单元格，一般文本显示，当然字符的格式化还是有效的（见图7.36）。第73页/共84页74图7.36第74页/共84页75自动套用格式【例7.6】表格套用格式 选中要套用格式的表格。执行Commands|Format Table（格式化表格）命令，会出现Format Table(格式化表格)对话框（见图7.37）。在左上角的列表中，选择现有的某种格式，这时在右方可以看到当前选择的预览效果。在该对话框中，还可以对表格的格式进行相应的调整。图7.38是套用格式的表格。第75页/共84页
40、76图7.37第76页/共84页77图7.38第77页/共84页787.4 利用表格布局版面在网页制作中，表格除用作格式化数据的排放外，由于其定位方便，在页面的布局中有很大的用处。图7.39是800buy的一个网页，查看它的HTML源代码，并将表格加上5个像素的边图7.39800buy的一个网页框，这时可以清楚地看到它的表格结构（见图7.40，每一个黑框是一个表格），如果将其中的内容删除，它的结构更为清晰（见图7.41）。使用表格布局版面应注意以下问题：浏览器在下载表格时，需要将表格中的所有内容（包括图像）都下载完毕后才显示，所以，如果一个页面有很好的上下结构，可以分成几个上下并列的表格，而不
41、要把整个页面中的所有内容都放在一个表格中，这样可以加快浏览速度，减少等待时间，特别是网页内容较多时更应这样。第78页/共84页79图7.39第79页/共84页80图7.40第80页/共84页81图7.41第81页/共84页82如果版面是大块内容，可以使用较粗的表格，即行列数不用太多。如果页面内容比较细碎，可以使用较细的表格，也可以使用嵌套表格，即表格单元格的内容是另一个表格。用表格布局版面，一种是通过细分行列精确定位页面元素，另一种是通过行高和列宽的调整来确定页面元素在版面中的位置。用表格布局版面时一般不希望页面显示表格线，这时可以设置表格的边框宽度为0，以达到不显示表格线的目的，也可以设置边框的颜色为背景色。第82页/共84页83思考与练习1.以图的形式说明什么是表格、单元格、单元格内部边距、单元格边距、表格边框？2.如何在文档中插入表格?如何使用已有的格式化文本文件创建表格？3.表格的编辑包含哪些内容？简要说明操作命令。4.如何改变表格或单元格边框的宽度和颜色？5.试制作一个网页，将网页中的文本和图像放在表格的单元格中，通过不同的单元格或对象在单元格中的不同排列方式（居中、居左、居右等）或改变单元格的大小来定位其中的对象。用什么办法不显示表格边框？第83页/共84页84感谢您的观看。第84页/共84页