1 / 23

第 7 章 表格

第 7 章 表格. 7.1 表格的基本操作 7.2 设置单元格属性 7.3 设置表格属性 7.4 表格的排序 7.5 格式化表格 7.6 表格数据的导入和导出. 7.1 表格的基本操作. 7.1.1 创建表格 7.1.2 单元格的拆分与合并 7.1.3 行与列的添加与删除. 7.1.1 创建表格. 创建表格的具体步骤如下： （ 1 ）选择菜单命令 【 插入 】 表格 】 ，会自动打开 【 表格 】 对话框，如图 7-1 所示。 （ 2 ）在上图中设置表格的行数与列数，默认为 3 行 3 列。

gretchen-morgan
Download Presentation

第 7 章 表格

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第7章 表格 7.1表格的基本操作 7.2设置单元格属性 7.3设置表格属性 7.4表格的排序 7.5格式化表格 7.6表格数据的导入和导出

  2. 7.1表格的基本操作 • 7.1.1 创建表格 • 7.1.2单元格的拆分与合并 • 7.1.3 行与列的添加与删除

  3. 7.1.1 创建表格 创建表格的具体步骤如下： （1）选择菜单命令【插入】表格】，会自动打开【表格】对话框，如图7-1所示。 （2）在上图中设置表格的行数与列数，默认为3行3列。 （3）设置表格的宽度。可为百分比或者像素，在此设为100％，这样无论当前的窗口有多大，表格始终可以充满整个页面。

  4. 7.1.1 创建表格 （4）在【边框粗细】文本框中设置表格边框的粗细。在此设置为0，数值越大，边框就越粗。 （5）设置单元格边距和间距，在此设为1。 （6）设置页眉，即为表格的对齐方式，有无、左、顶部、两者共四种选择，在此选择默认。实际操作时可根据需要选择合适的方式。 （7）此外，还有辅助功能区，可根据需要进行设置，也可留空。 （8）单击【确定】按钮，在当前文档中，插入了一个3行3列，宽度为100%的表格，如图7-2所示。

  5. 7.1.2单元格的拆分与合并 表格中行与列围成的区域称为单元格，在单元格中可以插入文本、图像等元素，也可以根据实际的需要对单元格进行合并和拆分，具体的步骤如下： （1）将单元格拆分成行或列，行数中可以输定数字，显示拆分的数量。将光标放在刚插入的表格第一行，单击【属性】面板中的“拆分单元格”按钮，会弹出【拆分单元格】对话框，如图7-3所示。

  6. 7.1.2单元格的拆分与合并 （2）在对话框中将【单元格拆分】后的“列”单选按钮选中，在【列数】文本框中输入2，单击【确定】按钮，就可以把表格的第一行拆分成2列，变成2个单元格，如图7-4所示。 （3）选中刚才拆分的2个单元格，此时在属性面板中，单击【合并单元格】按钮，则2列单元格又会合并成1个，如图7-5、7-6所示。

  7. 7.1.3 行与列的添加与删除 对行与列进行添加与删除的操作步骤如下： （1）在新建的表格上分别输入文本，如图7-7所示。 （2）在第四行右击，在弹出的快捷菜单中选择【表格】插入行】命令，此时就会在当前行上方插入一行，如图7-8所示。 （3）在当前的第5行右击，在弹出的快捷菜单中选择【表格》插入行或列】命令，如图7-9所示。

  8. 7.1.3 行与列的添加与删除 （4）打开【插入行或列】对话框，如果选择插入【行】选项，可以设置插入的行在插入点的上或下，如果选项的是插入【列】选项，可以设置插入的列在插入点的前或后。这里仅以对行的操作为例，选择在所选位置之前插入2行，如图7-10所示。 （5）单击【确定】按钮，此时表格变成了7行，如图7-11所示。 （6）将光标置于要删除行的任意一个单元格中，右键选择【表格》删除行】命令或者按下Delete键，可将该行删除。如图7-12、7-13所示。

  9. 7.2设置单元格属性 单元格作为表格的重要的组成部分，其属性的设置影响到表格的外观，将鼠标放到某个单元格内，可以通过【属性】面板对这个单元格进行设置，如图7-14所示。 在属性面板中，各参数的含义如下： （1）水平对齐：有默认、左对齐、居中对齐、右对齐4种对齐方式。默认的对齐方式是左对齐，设置后的三种效果如图7-15所示。 （2）垂直对齐：有默认、顶端、底部、基线4种方式，默认的对齐方式是居中，设置后的三种效果如图7-16所示。

  10. 7.2设置单元格属性 （3）在【属性】面板中宽和高的文本框中输入数值，可以设置单元格的高度和宽度，此数值的单位可为像素(px)或者百分比(%) （4）单元格中设置背景图片，单击背景后的按钮，在弹出的【选择图像源文件】对话框中选择背景图像，然后单击【确定】按钮，完成背景图像的设置，如图7-17所示。 （5）设置背景色，单击背景颜色后的按钮，可以对选中的单元格背景颜色进行设置，如图7-18所示。 （6）设置单元格边框颜色，单击边框颜色后的按钮，可以对所选单元格的边框颜色进行设置，如图7-19所示。

  11. 7.3设置表格属性 • 7.3.1 表格的边框属性 • 7.3.2 表格的背景属性 • 7.3.3表格的对齐属性 • 7.3.4表格的填充与间距 • 7.3.5 表格的嵌套

  12. 7.3.1 表格的边框属性 • 边框属性有2个：大小和颜色，边框的大小属性用于设置边框的宽度，在【属性】面板中“边框”选项中设置其宽度，可以设置为0或其他数值。只有在其数值大于0时，边框才可以在浏览器中可见。表格边框在网页设计过程中经常用到，有时会根据需要设置成一定的数值，以像素为单位。 • 边框的颜色是为了美化表格和网页而设置的，可以在“边框颜色”选项中直接输入颜色值，或单击“边框颜色”后的按钮，出现颜色选择器，或采用自定义颜色适配器，进行边框颜色的设置，而且边框颜色只有在表格的宽度大于0时才有效。

  13. 7.3.2 表格的背景属性 表格的背景可以使用颜色填充也可以使用图片填充。使用背景色填充表格的步骤如下： • 选中表格，在【属性】面板中的背景颜色后面的文本框中输入颜色值，或者在颜色选择框中选择背景颜色，属性如图7-21所示。 • 设置背景颜色的表格在浏览器中的显示效果如图7-22所示。

  14. 7.3.2 表格的背景属性 • 使用背景图片填充表格的步骤如下： • （1）选中表格，打开【属性】面板，在背景后面的文本框中输入表格背景图像的路径和名称，或者单击【文件夹】按钮，打开【选择图像源文件】对话框，选择本地图片作为背景图像，如图7-23所示。 • （2）单击【确定】按钮，就可以将表格的背景设置为图片，表格在浏览器中的预览效果如图7-24所示。

  15. 7.3.3表格的对齐属性 • 选中表格，在属性面板中可以设置表格在文档中的对齐方式。可以设置为：左对齐、居中对齐、右对齐，根据需要进行设置，默认是左对齐。如果表格的宽度为100%时，就不需要设置对齐属性，不同的对齐属性在浏览器中的效果如图7-25所示。

  16. 7.3.4表格的填充与间距 • 在属性面板中可以设置表格的填充与间距数值。填充：通过数值设置单元格内部空白区域的大小；间距：通过数值设置单元格之间的距离。设置表格填充和间距的属性效果如图7-26所示。 • 使用表格的填充和间距属性可以设置细边框的表格，此属性在实际制作过程中经常用到。

  17. 7.3.5 表格的嵌套 • 使用表格嵌套来制作网页的步骤如下： • （1）单击工具栏中【插入表格】按钮，插入一个2行2列的表格。表格的属性如图7-27所示。 • （2）在第1行第1列中插入图像，第1行第2列中插入文本。 • （3）在第2行的2个单元格插入和第1行同样的元素，此时文档效果如图7-28所示。 • （4）将第2行第1列的图像换成一个大图，此时文档的界面发生了错位，第1行第1列的单元格的宽度被第2行第1列的图给撑大了，如图7-29所示。

  18. 7.3.5 表格的嵌套 • （5）如果需要保持第1行的原图片和文档位置不变，需要建立表格嵌套。 • （6）选中第1行的2个单元格，单击【属性】面板中的“合并单元格”按钮，将第1行的2个单元格合并。 • （7）然后在合并后的单元格中插入一个1行2列的表格，并设置边框为0，如图7-30所示。 • （8）单击【确定】按钮，将表格插入到单元格中，如图7-31所示。 • （9）将原来单元格的图像和文本分别移到新建的这个表格的2个单元格中，保存文档，并在浏览器中预览效果如图7-32所示。

  19. 7.4表格的排序 • 在网页中，用户经常要对表格中的大量数据进行排序，使用Dreamweaver8可以很容易实现将表格内的数据排序，具体的操作步骤如下： • （1）选中页面中的表格，如图7-33所示。 • （2）选择菜单命令【命令】排序表格】，弹出【排序表格】对话框，如图7-34所示。 • （3）设置排序按【列3】。 • （4）设置【顺序》按数值顺序》降序】。 • （5）设置【再按》顺序》按字母顺序》升序】。 • （6）选中【完成排序后所有行的颜色保持不变】复选项。 • （7）单击【确定】按钮，表格中数据的排序结果如图7-35所示。

  20. 7.5格式化表格 • 下面将介绍如何美化表格，具体的操作步骤如下： • （1）选中表格，单击【命令】格式化表格】选项，如图7-36所示。 • （2）单击【格式化表格】选项后，将弹出【格式化表格】对话框，如图7-37所示。 • （3）在【格式化表格】对话框的左上角有各种样式，读者可以根据各自的喜好自行选择。本例中选择【AltRows：Earth Colors】这一项。这里需要注意的是最后一项，该项询问是否把各样式代码添加到TD标注里而非默认添加到TR标签中。建议不要勾选该项，否则会生成比默认设置多得多的代码。格式化后的表格如图7-38所示。

  21. 7.6表格数据的导入和导出 • 7.6.1 表格数据的导入 • 7.6.2 表格数据的导出

  22. 7.6.1 表格数据的导入 • （1）在将Excel中的数据导入之前，也可以先将Excel中的文本另存为文本格式的文件再导入，但要注意保存类型应选择【文本文件（制表分隔符）】。如图7-39所示。 • （2）选择菜单命令【文件》导入》表格式数据】，弹出“导入表格式数据”对话框，如图7-40所示。 • （3）单击【浏览】按钮，选择存放数据的文本文件即cj.txt文件。其定界符项要和文本文件里的分离符相对应，因为cj.txt文件里用的是制表符，所以在此选择了Tab，其他各项可根据读者的需要进行修改。 • （4）如果选择菜单命令【文件》导入》Excel文档】，则弹出“导入Excel文档”对话框，如图7-41所示。 • （5）单击【确定】按钮，完成表格数据的导入，此时再文档中插入了表格，如图7-42所示。

  23. 7.6.2 表格数据的导出 利用Dreamweaver 8同样可以将表格数据导出为文本文件，具体的操作步骤如下： • （1）将光标移至表格中的任意一个单元格，选择菜单命令【文件》导出》表格】，弹出“导出表格”对话框，如图7-43所示。 • （2）选择【定界符】下拉列表中的选项，设置导出表格后各单元格之间用什么符号来进行分隔，在此例中选择Tab。 • （3）选择【换行符】下拉列表中的选项，设置导出的表格适用于哪个操作系统，本例选择Windows。 • （4）单击【导出】按钮，弹出【表格导出为】对话框，在文件名后的文本框中输入导出的文件名及扩展名，如图7-44所示。 • （5）单击【保存】按钮，完成表格数据的导出。

More Related