教你如何制作网页表格(ppt 86页)

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