《网页设计table制作》由会员分享，可在线阅读，更多相关《网页设计table制作（85页珍藏版）》请在金锄头文库上搜索。
1、第7章 表 格7.1 创建表格7.2 编辑表格7.3 表格的格式化7.4 利用表格布局版面思考与练习1 17.1 创建表格 7.1.1 表格的基本概念 在网页中，表格的结构如图7.1所示。 表格由一些线条分开的小格组成。线条即是表格的边 框，被边框分割开来的区域称之为单元格，数据、 文字、图形、图片等对象均可根据需要放在相应的 单元格中。位于水平方向上的一系列单元格称作一 行，位于垂直方向上的一系列单元格称作一列。 在单元格中，可以输入文字和其他对象，这些文字或 对象同单元格边缘之间的距离称作单元格内部边距 （cell padding）。单元格之间的距离称作单元格 间距（cell spacin
2、g）。2 2图7.13 37.1.2 插入表格 【例7.1】插入表格 将插入点放置到文档中要插入表格的地方。 执行Insert|Table（插入|表格）命令，或单击普通 对象面板上的Insert Table按钮（见图7.2）。如果 没有预先设置插入点的位置，可以直接从对象面板 中将该按钮拖动到文档中需要插入表格的位置，打 开如图7.3所示的对话框，提示确定表格的格式。 在Rows （行）文本框中，输入要插入表格的行数 。 在Columns（列）文本框中，输入要插入表格的列数 。 在Cell Padding文本框中，输入单元格中对象同单元 格内部边界之间的距离，单位为像素点。4 4图7.25 5
3、图7.36 6在Cell Spacing文本框中，输入单元格之间的距离值，单 位为像素点。 在Width文本框中输入表格宽度值，单位可以在右方的下 拉列表中选择。Pixel（像素），以绝对的像素值来设置 表格宽度；Percent（百分比），设置表格宽度同浏览器 窗口宽度的百分比。 在Border（边框）文本框中，输入边框的宽度，单位为像 素点，0表示无边框。 设置完毕，单击OK按钮，确定操作。一个表格就会出 现在文档中，如图7.4所示。 7.1.3 在表格中添加内容 表格的内容要添加到表格的单元格中。单元格中可以插入 任何类型的数据，例如文本、图像、表单甚至表格等。 同时也可以按照通常的编辑页
4、面元素的方法，编辑其中 的内容。例如，可以编辑其中的文本，也可以设置其中 的文本格式。7 7图7.48 8单击要插入内容的单元格，可以直接插入、编辑文本 ，也可插入图像、导航条、表单等页面元素，方法 同不在表格中的方法完全相同。在一个单元格中输 入完毕，按Tab键，可以将插入点移动到下一个单元 格中，以便继续输入。如果在当前行的最后一个单 元格中按Tab键，则将插入点移动到下一行中的第一 个单元格内。按Shift+Tab键可将插入点移动到上一 个单元格。在当前行的第一个单元格中按Shift+Tab 键，则将插入移到上一行中的最后一个单元格内。 当然，也可直接用鼠标单击需要输入文本的单元格 ，直
5、接将插入点转移到该单元格中。图7.5是在表格 中插入的文本和图像。9 9图7.510107.1.4 利用文本文件创建表格 如果已有一些数据在Microsoft Excel 的工作表中，或 在Microsoft Access 的数据库中，或在其他形式的 文件系统中，如果在HTML文件中重新输入这些数据 ，就会显得非常麻烦，如果数据量很大，也就不大 现实。 在Dreamweaver中，允许导入其他类型文档中的数据 ，从而避免了再次输入数据的麻烦。 1. 生成分隔符类型的文本数据文件 在Dreamweaver中，如果要导入表格数据，必须首先 将数据存储为以某种分隔符作数据间隔的纯文本文 件，图7.6
6、、图7.7所示分别是以Tab和逗号作分隔符 的数据文件格式。这种格式文件可以使用相应软件 的存储工具生成，如Microsoft Excel 中的“文件|另 存为”命令等，也可以手工编辑。1111图7.61212图7.71313注意： 文件中的一行相当于表格的一行，一行中的各 列数据间用Tab空格或逗号隔开，在这样的文件中， 数据不像表格中的数据排得那样整齐。 2. 从格式化文本数据文件中导入表格数据 【例7.2】利用格式化文本创建表格 执行File|Import（文件|导入）命令，再选择Import Table Data （导入表格数据）；或执行 Insert|Tabular Data（插入|
7、表格数据）；也可以直 接单击对象面板上的Insert Tabular Data（插入表 格数据）按钮(图7.8)。打开Insert Tabular Data（ 插入表格数据）对话框（图7.9），提示选择数据文 件及格式。1414图7.81515图7.91616 在Data File（数据文件）文本框中，输入含有分隔 符的数据文件的路径和名称，也可以单击Browse（ 浏览）按钮，从磁盘上选择数据文件。 在Delimiter（分隔符）下拉列表中，选择文本数据 文件中所采用的分隔符。例如，如果数据文件采用 制表符作为分隔符，则应该选择Tab（制表符）；如 果数据文件中使用逗号作为分隔符，则可以选择
8、 Comma（逗号）。其中分隔符种类有以下几种： Tab（制表符）、Comma（逗号）、Semicolon（ 分号）、Colon（冒号）、Other（其他）。 如果在Delimiter（分隔符）下拉列表中没有合适的分 隔符号，则可以选择Other，然后在右方的文本框中 手工输入需要的分隔符。1717在Table Width（表格宽度）区域进行表格宽度的设置。选择Fit To Data （配合数据）单选按钮，则创建的表格中，每个表 格列的宽度根据数据的长度而定，使之刚好能够容纳最长的 数据。选择Set（设置）单选按钮，则可以自行指定表格的列 宽，在右方的文本框中输入列宽数值，在下拉列表中选择宽
9、度单位。 在Cell Padding（单元格内边空）文本框中，输入单元格中对 象同单元格内部边界之间的距离。 在Cell Spacing （单元格间距）文本框中，输入单元格之间的 距离。 在Format Top Row（格式化顶行）下拉列表中，可以设置表格 顶行的文字格式。这可以使表格列所表述的主题更加清晰， 相当于将表头突出显示。其中的选择有：No Formatting （ 不格式化）、Bold（加粗）、Italic（倾斜）、Bold Italic（ 加粗倾斜）。 在Border文本框中，可以输入表格边框的宽度。1818 设置完毕，单击OK按钮，确定操作。这时数据源文 件中的数据就被导入到文
10、档中，同时创建了相应的 表格。图7.10就是导入图7.6的数据生成的表格。 3. 导出表格数据 执行File|Export|Export Table（文件|导出|导出表格 ）命令可以将网页中的表格数据导出到文本文件中 ，供其他软件使用。参数设置与导入表格类似。1919图7.1020207.2 编辑表格 7.2.1 选中表格元素 1. 选中整张表格要选中整张表格，有6种方法： 将鼠标移动到表格的左上角位置，或是表格上边 框或下边框外附近的任意位置，当鼠标光标呈现一 个交叉十字的形状时单击鼠标，即可选中表格，如 图7.11所示。 将鼠标移动到表格左方边框之外的区域，当鼠标 指针变为指向右上方的箭头
11、 形状时，单击鼠标 ，即可选中整张表格。 单击表格中任意位置，然后执行 Modify|Table|Select Table（修改|表格|选择表格 ）命令，这时整张表格被选中。2121图7.112222 单击表格中任意位置，执行Edit|Select All（编辑|全选 ）命令，或是按Ctrl+A键。 单击表格中的任意位置，然后在文档窗口左下方状态行 上标记选择器中单击标记。 按住Shift键，然后单击表格中的任意位置。 当表格被选中时，其周围出现一个边框，表明被选中，同 时在边框的右方和下方带有黑色控制柄。通过拖动这些 黑色控点，可以改变表格的大小。 2. 选择表格行 要选中表格行，可以使用以
12、下几种方法。 将鼠标移动到要选中表格行左方表格之外的位置，当鼠 标指针变为一个指向右方的黑色箭头形状时单击鼠标， 即可选中相应的表格行，如图7.12所示。这时按下鼠标 上下拖动，可以选中多行。2323图7.112424图7.122525 单击要选择的表格行中的第一个单元格，然后按住鼠标 左键，拖动鼠标，直到要选择的表格行中最后一个单元 格中，释放鼠标，即可选中表格行。同样，拖动鼠标， 移过多个表格行，即可选中多个表格行。 单击要选择的表格行中任意一个单元格，然后在文档窗 口左下方状态行上单击标记，即可选中该表格行， 当表格行被选中时，该行中所有的单元格四周都带有黑 色粗框。 3. 选择表格列
13、要选中表格列，有如下方法： 将鼠标移动到要选中表格列上方表格之外的位置，当鼠 标光标指针变为一个指向下方的黑色箭头形状时单击鼠 标，即可选中相应的表格列；这时按下鼠标左右拖动， 可以选中多列，如图7.13所示。2626图7.132727 单击要选择表格列中的第一个单元格，然后按住鼠标左 键，拖动鼠标，直到要选择表格列中最后一个单元格中 ，再释放鼠标，即可选中表格列。同样，拖动鼠标，移 过多个表格列，即可选中多个表格列。 4. 选中单元格 在Dreamweaver中，可以选中相邻的单元格，也可以选中 不相邻的单元格。 选择一个单元格。在要选择的单元格中单击鼠标，然后 拖动到相邻单元格（左、右、上
14、、下以及斜线方向皆可 ）中部，当要选中单元格四周带有粗框时释放鼠标。 另一种方法是在要选中的单元格中单击鼠标，然后在文档 窗口左下方状态行上的标记选择器中，单击或 标记。被选中的单元格四周会出现粗框。2828 选中相邻多个单元格。在相邻单元格中的第一个单 元格中按下鼠标，拖动鼠标（可以横向、纵向、斜 线拖动），移动到最后一个单元格中，即可选中一 组相邻单元格。 选中不相邻的多个单元格。按住Ctrl键，单击要选 中的单元格，则被单击的单元格就会被选中。 5. 取消选中状态 选中表格元素后，如果希望取消选择状态，只要单击 任何单元格，就会取消对表格元素的选中状态。也 可以通过单击表格之外的其他任意
15、位置来取消对表 格元素的选择。29297.2.2 插入行或列 最初插入表格的行数或列数不够时，可以插入行或列，这 些操作都可以在Modify|Table菜单中实现（见图7.14） 。 1. 插入一行 执行Modify|Table|Insert Row（修改|表格|插入行）命令 ，或按Ctrl+M键，就会在原先单元格的上方，插入一个 新空白行。 2. 插入一列 执行Modify|Table|Insert Column（修改|表格|插入列）命 令，在原单元格的左方插入一列。 3. 插入多行或多列 执行Modify|Table|Insert Rows or Columns（插入行 或列）命令,打开I
16、nsert Rows or Columns（插入行或 列）对话框（图7.15），提示输入要添加的行数、列数 和位置。3030图7.143131图7.153232 要插入行，可以选择Rows；要插入列，可以选择 Columns。 如果插入行，则在Number of Rows（行数）数值框中输 入要添加的行数；如果插入列，则在Number of Columns（列数）数值框中输入要添加的列数。 在Where（哪里）区域，设置新插入行或列的位置。对于 插入行，可以选择Above the Selection（选中项之上） 或Below the Selection（选中项之下）；对于插入列， 可以选择Before current Column（当前列之前）或 After current Column（当前列之后）。 提示： 要在表格的最下边或右边增加行或列，可以使用表 格属性面操作。 选中整个表格； 在表格属性面板（图7.16）的Rows或Cols文本框中，
