网页设计table制作11.ppt

第7章 表 格 7.1 创建表格 7.1.1 表格的基本概念 在网页中，表格的结构如图7.1所示。 表格由一些线条分开的小格组成。线条即是表格的边框，被边框分割开来的区域称之为单元格，数据、文字、图形、图片等对象均可根据需要放在相应的单元格中。位于水平方向上的一系列单元格称作一行，位于垂直方向上的一系列单元格称作一列。 在单元格中，可以输入文字和其他对象，这些文字或对象同单元格边缘之间的距离称作单元格内部边距（cell padding）。单元格之间的距离称作单元格间距（cell spacing）。 7.1.2 插入表格 【例7.1】插入表格 ① 将插入点放置到文档中要插入表格的地方。 ② 执行Insert|Table（插入|表格）命令，或单击普通对象面板上的Insert Table按钮（见图7.2）。如果没有预先设置插入点的位置，可以直接从对象面板中将该按钮拖动到文档中需要插入表格的位置，打开如图7.3所示的对话框，提示确定表格的格式。 ③ 在Rows （行）文本框中，输入要插入表格的行数。 在Columns（列）文本框中，输入要插入表格的列数。 在Cell Padding文本框中，输入单元格中对象同单元格内部边界之间的距离，单位为像素点。 在Cell Spacing文本框中，输入单元格之间的距离值，单位为像素点。 在Width文本框中输入表格宽度值，单位可以在右方的下拉列表中选择。Pixel（像素），以绝对的像素值来设置表格宽度；Percent（百分比），设置表格宽度同浏览器窗口宽度的百分比。 在Border（边框）文本框中，输入边框的宽度，单位为像素点，0表示无边框。 ④ 设置完毕，单击OK按钮，确定操作。一个表格就会出现在文档中，如图7.4所示。 7.1.3 在表格中添加内容 表格的内容要添加到表格的单元格中。单元格中可以插入任何类型的数据，例如文本、图像、表单甚至表格等。同时也可以按照通常的编辑页面元素的方法，编辑其中的内容。例如，可以编辑其中的文本，也可以设置其中的文本格式。 单击要插入内容的单元格，可以直接插入、编辑文本，也可插入图像、导航条、表单等页面元素，方法同不在表格中的方法完全相同。在一个单元格中输入完毕，按Tab键，可以将插入点移动到下一个单元格中，以便继续输入。如果在当前行的最后一个单元格中按Tab键，则将插入点移动到下一行中的第一个单元格内。按Shift+Tab键可将插入点移动到上一个单元格。在当前行的第一个单元格中按Shift+Tab键，则将插入移到上一行中的最后一个单元格内。当然，也可直接用鼠标单击需要输入文本的单元格，直接将插入点转移到该单元格中。图7.5是在表格中插入的文本和图像。 7.1.4 利用文本文件创建表格 如果已有一些数据在Microsoft Excel 的工作表中，或在Microsoft Access 的数据库中，或在其他形式的文件系统中，如果在HTML文件中重新输入这些数据，就会显得非常麻烦，如果数据量很大，也就不大现实。 在Dreamweaver中，允许导入其他类型文档中的数据，从而避免了再次输入数据的麻烦。 1. 生成分隔符类型的文本数据文件 在Dreamweaver中，如果要导入表格数据，必须首先将数据存储为以某种分隔符作数据间隔的纯文本文件，图7.6、图7.7所示分别是以Tab和逗号作分隔符的数据文件格式。这种格式文件可以使用相应软件的存储工具生成，如Microsoft Excel 中的“文件|另存为”命令等，也可以手工编辑。 注意： 文件中的一行相当于表格的一行，一行中的各列数据间用Tab空格或逗号隔开，在这样的文件中，数据不像表格中的数据排得那样整齐。 2. 从格式化文本数据文件中导入表格数据 【例7.2】利用格式化文本创建表格 ① 执行File|Import（文件|导入）命令，再选择Import Table Data （导入表格数据）；或执行Insert|Tabular Data（插入|表格数据）；也可以直接单击对象面板上的Insert Tabular Data（插入表格数据）按钮(图7.8)。打开Insert Tabular Data（插入表格数据）对话框（图7.9），提示选择数据文件及格式。 ② 在Data File（数据文件）文本框中，输入含有分隔符的数据文件的路径和名称，也可以单击Browse（浏览）按钮，从磁盘上选择数据文件。 ③ 在Delimiter（分隔符）下拉列表中，选择文本数据文件中所采用的分隔符。例如，如果数据文件采用制表符作为分隔符，则应该选择Tab（制表符）；如果数据文件中使用逗号作为分隔符，则可以选择Comma（逗号）。其中分隔符种类有以下几种： Tab（制表符）、Comma（逗号）、Semicolon（分号）、Co